本地存储 - 使用代码进行HTML5演示

Question

我正在尝试使用html5与表单一起使用本地存储.我无法在网上找到一个工作演示.任何人都可以找到一个很好的演示和一个有效的教程.我的浏览器完全受支持.

感谢所有的帮助.谢谢

Answer 1

这是一个jsfiddle演示

(相关js代码的副本,localStorage的使用在注释中被调出)

//Note that if you are writing a userscript, it is a good idea
// to prefix your keys, to reduce the risk of collisions with other 
// userscripts or the page itself.
var prefix = "localStorageDemo-";

$("#save").click(function () { 
    var key = $("#key").attr('value');
    var value = $("#value").attr('value');
    localStorage.setItem(prefix + key, value);      //******* setItem()
    //localStorage[prefix+key] = value; also works
    RewriteFromStorage();
});

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

RewriteFromStorage();

Answer 2

以下是HTML5的LocalStorage示例.

这是一个小提琴http://jsfiddle.net/ccatto/G2SyC/2/ 代码演示示例.

一个简单的代码是:

// saving data into local storage
localStorage.setItem('LocalStorageKey', txtboxFooValue);

// getting data from localstorage
var retrivedValue = localStorage.getItem('LocalStorageKey', retrivedValue);

这是一个更完整的代码示例,您可以在文本框中输入文本并单击按钮.然后将文本存储到LocalStorage中并检索并显示在div中.

<h2>HTML LocalStorage Example</h2>

<section>
    <article>
        Web Storage example:
        <br />
        <div id="divDataLocalStorage"></div>
        <br />
        Value
        <input type="text" id="txtboxFooExampleLocalStorage" />
        <input type="button" id="btnSaveToLocalStorage" value="Save Text to Local Storage" />
    </article>
</section>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">    
    console.log("start log");  
    $("#btnSaveToLocalStorage").click(function () {
        console.log("inside btnSaveToLocalStorage Click function");
        SaveToLocalStorage();
    });

    function SaveToLocalStorage(){
        console.log("inside SaveToLocalStorage function");
        var txtboxFooValue = $("#txtboxFooExampleLocalStorage").val();
        console.log("text box Foo value  = ", txtboxFooValue);
        localStorage.setItem('LocalStorageKey', txtboxFooValue);
        console.log(" after setItem in LocalStorage");
        RetrieveFromLocalStorage();
    }

    function RetrieveFromLocalStorage() {
        console.log("inside Retrieve from LocalStorage");
        var retrivedValue = 'None';
        var retrivedValue = localStorage.getItem('LocalStorageKey', retrivedValue);
        $("#divDataLocalStorage").text(retrivedValue);
        console.log("inside end of retrieve from localstorge");
        console.log("retrieved value = ", retrivedValue);
    }

</script>

希望这可以帮助!

Answer 3

查看MDC - DOM Storage或W3C 的 Webstorage 草案（好吧，演示较少，描述较多）。但 API 并没有那么大。