本地存储 - 带有代码的 HTML5 演示 [关闭]答案

【问题标题】：Local Storage - HTML5 Demo with Code [closed]本地存储 - 带有代码的 HTML5 演示 [关闭]
【发布时间】：2011-05-26 14:26:56
【问题描述】：

我正在尝试通过使用 html5 的表单来处理本地存储。我只是无法在线找到一个工作演示。任何人都可以找到我一个很好的演示和一个有效的教程。完全支持我的浏览器。

感谢所有帮助。谢谢

【问题讨论】：

标签： javascript html local-storage demo

【解决方案1】：

本地存储是 HTML5 API 的一部分——它是一个对象，我们可以通过 JavaScript 访问这个对象及其功能。在本教程中，我们将使用 JavaScript 了解本地存储对象的基础知识以及我们如何在客户端存储和检索数据。

本地存储项以键/值对的形式设置，因此对于我们希望存储在客户端（最终用户的设备）上的每个项目，我们都需要一个键——这个键应该与它所存储的数据直接相关放在旁边。

我们可以访问多种方法和一个重要的属性，所以让我们开始吧。

您可以将此代码键入 HTML5 文档中的脚本标签内。

设置项目

首先，我们有 setItem() 方法，它将我们的键/值（或有时称为名称/值）对作为参数。这个方法非常重要，因为它可以让我们在客户端实际存储数据；此方法没有特定的返回值。 setItem() 方法如下所示：

localStorage.setItem("Name", "Vamsi");

获取物品

现在我们已经了解了一些数据的存储，让我们从本地存储中获取一些已定义的数据。为此，我们有 getItem() 方法，该方法将键作为参数并返回与其关联的字符串值：

localStorage.getItem("Name");

删除项目

我们感兴趣的另一个方法是 removeItem() 方法。此方法将从本地存储中删除项目（稍后我们将更多地讨论“清空”本地存储）。 removeItem() 方法将键作为参数，并将删除与该键关联的值。它看起来像这样：

localStorage.removeItem("Name");

这里是示例。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Local Storage</title>
        <script>
            localStorage.setItem("Name", "Vamsi");
            localStorage.setItem("Job", "Developer");
            localStorage.setItem("Address", "123 html5 street");
            localStorage.setItem("Phone", "0123456789");
            console.log(localStorage.length);
            console.log(localStorage.getItem("Name"));
            localStorage.clear();
            console.log(localStorage.length);
        </script>
    </head>
    <body>
    </body>
</html>

【讨论】：

【解决方案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>

希望这会有所帮助！

【讨论】：

localStorage.getItem() 调用的第二个参数是什么？ MDN page 没有列出它
我们可以通过调用localStorage方法来访问一个Storage对象。 getItem()是Storage接口的一个方法，我们使用localStorage.getItem()，传入一个key，得到一个值。
根据文档，getItem 方法只接受一个参数 - 密钥。不是两个论点。我猜你的意思是第二个参数是默认值，但我对 Chrome 的测试表明第二个参数被忽略了
我没有意识到这一点；感谢您指出这一点。

【解决方案3】：

这是一个jsfiddle 演示

（相关js代码的副本，在cmets中调用了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();

【讨论】：

HTML5 localStorage 上令人兴奋的综合示例！！清除大部分 localStorage 概念...
@user2049259 只需将部分替换为 attr 到 prop jsfiddle.net/HMEVd/413 我将在大约 40 个点的时间内完成...

【解决方案4】：

看看MDC - DOM Storage 或W3C's Webstorage draft（好吧，少一些演示，多一些描述）。但 API 并没有那么大。

【讨论】：