Web存储允许我们在浏览器里保存简单的键/值数据。Web存储和cookie很相似，但它有着更好的实现方式，能保存的数据量也很大。这两种类型共享相同的机制，但是被保存数据的可见性和寿命存在区别。

PS:还有一种存储规范名为“索引数据库API”（Indexed Database API），它允许保存富格式数据和进行SQL风格的查询。

1.使用本地存储

我们可以通过全局属性 localStorage访问本地存储功能。这个属性会返回一个Storage 对象，下表对其进行了介绍。Storage 对象被用来保存键/值形式的字符串对。

Storage 对象可用来存储键/值对，其中键和值都是字符串。键必须是惟一的，这就意味着如果我们用 Storage对象里已经存在的键调用setItem方法，就会更新它的值。下面的示例展示了如何添加、修改和清除本地存储中数据。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>使用本地存储</title>

    <style>

        body > * {float: left;}

        table {border-collapse: collapse;margin-left:50px; }

        th,td {padding: 4px;}

        th {text-align: right;}

        input {border: thin solid black;padding: 2px;}

        label {min-width: 50px;display: inline-block;text-align: right;}

        #countmsg,#buttons {margin-left: 50px;margin-top: 5px;margin-bottom: 5px;}

    </style>

</head>

<body>

<div>

    <div><label>Key:</label><input id="key" placeholder="Enter Key" /></div>

    <div><label>Value:</label><input id="value" placeholder="Enter Value" /></div>

    <div id="buttons">

        <button id="add">Add</button>

        <button id="clear">Clear</button>

    </div>

    <p id="countmsg">These are <span id="count"></span> items </p>

</div>

<table id="data" border="1">

    <tr><th>Item Count:</th><td id="count">-</td> </tr>

</table>

<script>

    displayData();

    var buttons = document.getElementsByTagName("button");

    for(var i=0;i<buttons.length;i++){

        buttons[i].onclick = handleButtonPress;

    }

    function handleButtonPress(e){

        switch (e.target.id){

            case 'add':

                var key = document.getElementById("key").value;

                var value = document.getElementById("value").value;

                localStorage.setItem(key,value);

                displayData();

                break;

            case 'clear':

                localStorage.clear();

                displayData();

                break;

        }

    }

    function displayData(){

        var tableElem = document.getElementById("data");

        tableElem.innerHTML = "";

        var itemCount = localStorage.length;

        document.getElementById("count").innerHTML = itemCount;

        for(var i=0;i<itemCount;i++){

            var key = localStorage.key(i);

            var val = localStorage[key];

            tableElem.innerHTML += "<tr><th>" + key + ":</th><td>" + val + "</td></tr>";

        }

    }

</script>

</body>

</html>

此例报告了本地存储中的项目数量，并枚举已保存的键/值对来填充一个表格元素。这里添加了两个button元素，在Add按钮被按下时将他们的内容保存为项目。在响应Clear按钮时，会清除本地存储中的内容。其显示效果如下：

浏览器不会删除我们用 localStorage对象添加的数据，除非用户自己清除浏览数据。

监听存储事件

通过本地存储功能保存的数据对所有来源相同的文档都是可用的。某个文档对本地存储进行修改时会触发storage事件，我们可以监听其他同源文档上的这个事件来确保我们能跟上最新的变化。

与storage事件同时指派的对象是一个StorageEvent对象，它的成员如下表所示：

下面的示例展示了一个文档，它会监听并编录本地存储对象上触发的事件。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>编录本地存储事件</title>

    <style>

        table {border-collapse:collapse; }

        th,td {padding: 4px;}

    </style>

</head>

<body>

<table id="data" border="1">

    <tr>

        <th>key</th>

        <th>oldValue</th>

        <th>newValue</th>

        <th>url</th>

        <th>storageArea</th>

    </tr>

</table>

<script>

    var tableElem = document.getElementById("data");

    window.onstorage = handleStorage;

    function handleStorage(e){

        var row = "<tr>";

        row += "<td>" + e.key + "</td>";

        row += "<td>" + e.oldValue + "</td>";

        row += "<td>" + e.newValue + "</td>";

        row += "<td>" + e.url + "</td>";

        row += "<td>" + (e.storageArea == localStorage) + "</td>";

        row += "</tr>";

        tableElem.innerHTML += row;

    }

</script>

</body>

</html>

storage事件是通过Window对象触发的，此对象可以来自共享被改动存储的任何一个文档。此例中，每次接收到事件时都会给table元素添加一个新行，演示效果如下：

图中的事件展示了给本地存储添加新项目的过程。url属性能帮助我们了解是哪个文档触发了变化。storageArea属性会返回发生变化的Storage对象，它可以是本地或会话存储对象。此例只接收来自本地存储对象的事件。

PS:这些事件不会再制造变化的文档内指派。

2. 使用会话存储

会话存储（session storage）的工作方式和本地存储很接近，不同之处在于数据是各个浏览上下文私有的，会在文档被关闭时移除。我们通过全局变量 sessionStorage访问会话存储，它会返回一个Storage对象。下面的例子展示了会话存储的用法：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>使用会话存储</title>

    <style>

        body > * {float: left;}

        table {border-collapse: collapse;margin-left:50px; }

        th,td {padding: 4px;}

        th {text-align: right;}

        input {border: thin solid black;padding: 2px;}

        label {min-width: 50px;display: inline-block;text-align: right;}

        #countmsg,#buttons {margin-left: 50px;margin-top: 5px;margin-bottom: 5px;}

    </style>

</head>

<body>

<div>

    <div><label>Key:</label><input id="key" placeholder="Enter Key" /></div>

    <div><label>Value:</label><input id="value" placeholder="Enter Value" /></div>

    <div id="buttons">

        <button id="add">Add</button>

        <button id="clear">Clear</button>

    </div>

    <p id="countmsg">These are <span id="count"></span> items </p>

</div>

<table id="data" border="1">

    <tr><th>Item Count:</th><td id="count">-</td> </tr>

</table>

<script>

    displayData();

    var buttons = document.getElementsByTagName("button");

    for(var i=0;i<buttons.length;i++){

        buttons[i].onclick = handleButtonPress;

    }

    function handleButtonPress(e){

        switch (e.target.id){

            case 'add':

                var key = document.getElementById("key").value;

                var value = document.getElementById("value").value;

                sessionStorage.setItem(key,value);

                displayData();

                break;

            case 'clear':

                sessionStorage.clear();

                displayData();

                break;

        }

    }

    function displayData(){

        var tableElem = document.getElementById("data");

        tableElem.innerHTML = "";

        var itemCount = sessionStorage.length;

        document.getElementById("count").innerHTML = itemCount;

        for(var i=0;i<itemCount;i++){

            var key = sessionStorage.key(i);

            var val = sessionStorage[key];

            tableElem.innerHTML += "<tr><th>" + key + ":</th><td>" + val + "</td></tr>";

        }

    }

</script>

</body>

</html>

此例的工作方式和前面本地存储的例子很接近，不同之处在于可见性和寿命受到限制。这些限制会影响storage事件的处理方式：前面提到的storage事件只会在共享存储的文档中触发。对于会话存储，这就意味着事件只会在内嵌文档中触发，比如 iframe里的文档。修改前一示例如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>使用会话存储的storage事件</title>

    <style>

        body > * {float: left;}

        table {border-collapse: collapse;margin-left:50px; }

        th,td {padding: 4px;}

        th {text-align: right;}

        input {border: thin solid black;padding: 2px;}

        label {min-width: 50px;display: inline-block;text-align: right;}

        #countmsg,#buttons {margin-left: 50px;margin-top: 5px;margin-bottom: 5px;}

        iframe {clear: left;}

    </style>

</head>

<body>

<div>

    <div><label>Key:</label><input id="key" placeholder="Enter Key" /></div>

    <div><label>Value:</label><input id="value" placeholder="Enter Value" /></div>

    <div id="buttons">

        <button id="add">Add</button>

        <button id="clear">Clear</button>

    </div>

    <p id="countmsg">These are <span id="count"></span> items </p>

</div>

<table id="data" border="1">

    <tr><th>Item Count:</th><td id="count">-</td> </tr>

</table>

<br />

<iframe src="storage-02.html" width="666" height="222"></iframe></div>

<script>

    displayData();

    var buttons = document.getElementsByTagName("button");

    for(var i=0;i<buttons.length;i++){

        buttons[i].onclick = handleButtonPress;

    }

    function handleButtonPress(e){

        switch (e.target.id){

            case 'add':

                var key = document.getElementById("key").value;

                var value = document.getElementById("value").value;

                sessionStorage.setItem(key,value)

                displayData();

                break;

            case 'clear':

                sessionStorage.clear();

                displayData();

                break;

        }

    }

    function displayData(){

        var tableElem = document.getElementById("data");

        tableElem.innerHTML = "";

        var itemCount = sessionStorage.length;

        document.getElementById("count").innerHTML = itemCount;

        for(var i=0;i<itemCount;i++){

            var key = sessionStorage.key(i);

            var val = sessionStorage[key];

            tableElem.innerHTML += "<tr><th>" + key + ":</th><td>" + val + "</td></tr>";

        }

    }

</script>

</body>

</html>

其演示效果如下：

来源：《HTML5权威指南》(《The Definitive Guide to HTML5》)

【温故而知新-Javascript】使用Web存储的更多相关文章

  1. 《JavaScript》web客户端存储

    Web存储: 兼容IE8在内的所有主流浏览器,不兼容早期浏览器:支持大容量但非无限量 LocalStorage和sessionStorage是window对象的两个属性,这两个属性都代表同一个stor ...

  2. 临时存存储页面上的数据---Web存储

    HTML5 Web存储的两种方法使用 localStorage和sessionStorage 参考: http://www.cnblogs.com/taoweiji/archive/2012/12/0 ...

  3. 【读书笔记】HTML5 Web存储

    PS:这里讲web存储,主要是在客户端存储的一些技术:cookie,localstorage,sessionstorage,WebSQL.     Cookie   Cookie是HTML4中在客户端 ...

  4. Web存储(Web Storage)的浏览器支持情况

    所有很酷的功能特征的出现最关键的就是浏览器的支持情况,幸运的是,所有的现代浏览器都支持HTML5 Web存储(Web Storage),从IE8开始也支持它.HTML5 Web存储(Web Stora ...

  5. 全 Javascript 的 Web 开发架构：MEAN

    http://developer.51cto.com/art/201404/434759.htm 全 Javascript 的 Web 开发架构:MEAN 引言 最近在Angular社区的原型开发者间 ...

  6. HTML5 Web存储(Web Storage)技术及用法

    在如今的Web开发中,HTML5是大家讨论的最大一个话题.HTML5提供的新功能特征使得Web程序员如虎添翼,并免去了以往钻研各种方法来让网站更好.更快.更灵活的气力.这些新功能中有一个非常让我感兴趣 ...

  7. HTML5 总结-Web存储-7

    HTML 5 Web 存储 在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 ses ...

  8. HTML5分析实战Web存储机制(Web Storage)

    Web Storage它是Key-Value在持久性数据存储的形式.Web Storage为了克服cookie把所引起的一些限制.当数据需要严格格控制client准时,没有必要不断地发回数据serve ...

  9. web存储之webstorage

    web存储分类 客户端和服务端 认识web存储 随着web应用的发展,是的客户端存储的用途越来越多,然而实现客户端端存储的方式也是越来越多样化.最简单最兼容的方式就是cookie,但作为真正的客户端存 ...

随机推荐

  1. 如何让C#像JavaScript一样编程

    JavaScript是一门动态语言,可以动态的给对象添加属性和方法,非常方便.那么有没有一种方式可以让C#也具备动态添加属性和方法的能力,像Javascript一样进行编程? 下面就介绍一个很不错的框 ...

  2. 20个基于 WordPress 搭建的精美网站

    WordPress 无处不在,小到人博客,大到广受欢迎的各类特色网站,你都能发现 WordPress 的影子,因为它是创建和维护一个网站最容易使用的平台. 另外,网络上有很多资源来创建你的网站,你基本 ...

  3. AngularJS结合RequireJS做文件合并压缩的那些坑

    我在项目使用了AngularJS框架,用RequireJS做异步模块加载(AMD),在做文件合并压缩时,遇到了一些坑,有些只是解决了,但不明白原因. 那些坑 1. build.js里面的paths必须 ...

  4. 原生JS：String对象详解

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  5. SMARTFORM & SAPScript

    SMARTFORM和SAPScript是SAP用于打印单据和报表的工具.SMARTFORM是SAPScript的替代工具,但是由于 SAP最初都是用SAPScript,所以很多单据的打印,比如PO,B ...

  6. CART（分类回归树）

    1.简单介绍 线性回归方法可以有效的拟合所有样本点(局部加权线性回归除外).当数据拥有众多特征并且特征之间关系十分复杂时,构建全局模型的想法一个是困难一个是笨拙.此外,实际中很多问题为非线性的,例如常 ...

  7. Quartz2D复习（一）--- 基础知识 / 绘制线段圆弧 / 图片水印 / 截图

    1.Quartz 2D是一个二维绘图引擎,同时支持ios和Mac系统: Quart2D的API是纯C语言的,API来自于Core  Graphics框架: 2.Quartz 2D可以绘制图形(线段/三 ...

  8. Android中过场动画

    overridePendingTransition(R.anim.slide_in_right,R.anim.slide_out_left); 第一参数为进入的动画 第二参数为退出的动画 进入的动画 ...

  9. eclipse编码格式设置

    大家好,我是小Alan,很高兴大家能够看到这篇小小的技术点文章,这还是从参加工作以来,小Alan写的第一篇博文.喜欢能够给一些朋友带来方便. 说到eclipse编码格式的设置其实一个非常非常小的事情, ...

  10. vs2012中EF6的BUG

    BUG不怕,只要开源 1.无主键表序列化时会自动将所有非空列均设为主键列 Creating table -- Creating table 't_b_Camera' CREATE TABLE [dbo ...