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. SweetAlert – 替代 Alert 的漂亮的提示效果

    Sweet Alert 是一个替代传统的 JavaScript Alert 的漂亮提示效果.SweetAlert 自动居中对齐在页面中央,不管您使用的是台式电脑,手机或平板电脑看起来效果都很棒.另外提 ...

  2. 65行 JavaScript 代码实现 Flappy Bird 游戏

    飞扬的小鸟(Flappy Bird)无疑是2014年全世界最受关注的一款游戏.这款游戏是一位来自越南河内的独立游戏开发者阮哈东开发,形式简易但难度极高的休闲游戏,很容易让人上瘾. 这里给大家分享一篇这 ...

  3. 【HTML5】HTML5本地数据库（Web Sql Database）

    Web Sql数据库简介 Web SQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范.它通过一套API来操纵客户端的数据库. Web SQL数据库的浏览器支持情况 Web SQL 数 ...

  4. AngularJS学习笔记之依赖注入

    最近在看AngularJS权威指南,由于各种各样的原因(主要是因为我没有money,好讨厌的有木有......),于是我选择了网上下载电子版的(因为它不要钱,哈哈...),字体也蛮清晰的,总体效果还不 ...

  5. [Android L]SEAndroid增强Androd安全性背景概要及带来的影响

    1  SEAndroid背景   Android对于操作系统安全性方面的增强一直沿用Linux内核所提供的MAC强制访问控制套件SELinux,对权限进行了更为深度的管理,有效地控制着进程对资源的访问 ...

  6. oc程序编译【-framework Foundation 编译】

    第一种编译 第二种编译 -framework Foundation 编译

  7. iOS 开发之路（AES/DES加密实现） 三

    最近接触的这个项目由于以前服务器上用的是DES/CBC/PKCS5Padding加密方式,为了让在iOS上的加密结果与服务器端保持一致,我做了很多尝试,现在分享给大家.PS:现在不推荐用DES了,只是 ...

  8. GCD中的dispatch_barrier_async函数的使用(栅栏函数)

    <一>什么是dispatch_barrier_async函数 毫无疑问,dispatch_barrier_async函数的作用与barrier的意思相同,在进程管理中起到一个栅栏的作用,它 ...

  9. 关于NodeJS的思考

    对于NodeJS来说传统程序员比较陌生,初看以为是什么前端框架,其实并不是前端框架.传统的Javascript只能跑在浏览器中,但是一位叫Ryan Dahl的开发者灵感一来,为什么Javascript ...

  10. 适当使用enum做数据字典 ( .net c# winform csharp asp.net webform )

    在一些应用中,通常会用到很多由一些常量来进行描述的状态数据,比如性别(男.女),审核(未审核.已审核)等.在数据库中一般用数字形式来存储,比如0.1等. 不好的做法 经常看到一些应用(ps:最近又看到 ...