Question

<html>
<head>
<title></title>
<style type="text/css">
    body
    {
        font-family: tahoma;
    }
    h2
    {
        font-weight: bold;
        border-bottom: 2px solid gray;
        margin-bottom: 10px;
    }
    #data
    {
        border: 1px solid grey;
    }
</style>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">       
    var prefix = "HTML5LocalStorage-";
    $("#save").click(function () {
        var key = $("#key").attr('value');
        var value = $("#value").attr('value');
        localStorage.setItem(prefix + key, value);          
        RewriteFromStorage();
    });

    function RewriteFromStorage() {
        $("#data").empty();
        for (var i = 0; i < localStorage.length; i++)
        {
            var key = localStorage.key(i); 
            if (key.indexOf(prefix) == 0) {
                var value = localStorage.getItem(key);                  
                var shortkey = key.replace(prefix, "");
                $("#data").append(
            $("<div class='kvp'>").html(shortkey + "=" + value)
               .append($("<input type='button' value='Delete'>")
                       .attr('key', key)
                       .click(function () { 
                           localStorage.removeItem($(this).attr('key'));
                           RewriteFromStorage();
                       })
                      )
        );
            }
        }
    }

    RewriteFromStorage();
</script>
<h2>
    LocalStorage Demo</h2>
<div id="data">
</div>
<hr />
<span>Key</span><input type="text" id="key" /><span>Value</span><input type="text"
    id="value" />
<input type="button" id="save" value="Save" />

我在localstorage.htm页面（visual studio 2010）上面写了上面的代码行，但是按钮点击输出什么都没有。我做了什么错误。我是这项技术的新手。

Answer 1

你的问题在于：

    var key = $("#key").attr('value');
    var value = $("#value").attr('value');

添加以下内容以查看问题：

alert(key + ' ' + value);

使用val insead获取输入的值......

var key = $("#key").val();

你可以see this working in my JSFiddle。

HTML5数据不存储在本地存储中

1 个答案: