本地存储localStorage

我们可以通过全局属性localStorage访问本地存储功能，该属性返回一个Storage对象，Storage对象用来保存键/值形式的字符串对象

Storage对象有如下属性和方法：

Storage对象可以用来保存键/值对，其中键和值都必须是字符串。键必须是唯一的，这意味着如果我们用Storage对象中的setItem方法设置相同的键名的键/值对，后面一个会覆盖掉前面一个，事实上就是后面一个更新了已经存在的键的的值。

localStorage案例1（localStorage.html）：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>localStorage</title>
 6 <style>
 7 
 8 </style>
 9 </head>
10 
11 <body>
12 <ul>
13     <li>key:<input id="key" type="text" value=""></li>
14     <li>value:<input id="value" type="text" value=""></li>
15     <li>
16         <input id="add" type="button" value="add">
17         <input id="clear" type="button" value="clear">
18     </li>
19     <li id="countmsg">There are <span id="count"></span> items</li>
20 </ul>
21 <table id="data"></table>
22 <script>
23     displayData();
24     document.getElementById('add').onclick=handleButtonPress;
25     document.getElementById('clear').onclick=handleButtonPress;
26     function handleButtonPress(e){
27         switch(e.target.id){
28             case 'add':
29                 var key=document.getElementById('key').value;
30                 var value=document.getElementById('value').value;
31                 localStorage.setItem(key,value);
32                 break;
33             case 'clear':
34                 localStorage.clear();
35         }
36         displayData();
37     }
38     function displayData(){
39         var tableItem=document.getElementById('data');
40         tableItem.innerHTML='';
41         var itemCount=localStorage.length;
42         document.getElementById('count').innerHTML=itemCount;
43         for(var i=0;i<itemCount;i++){
44             var key=localStorage.key(i);
45             var val=localStorage[key];
46             tableItem.innerHTML+='<tr><th>'+key+'</th><td>'+val+'</td></tr>';
47         }
48     }
49 </script>
50 </body>
51 </html>

预览效果：

该案例，当点击add按钮时会将数据添加到本地存储中，当按下clear按钮时则清楚本地存储中的内容；

在未清除的情况下，我们在相同的浏览器下访问上面的案例，可以看到刷新浏览器数据还是存在的，关闭浏览器后从新访问上面的案例数据一样的还是存在的。同源文档（下面说的所有同源文档都是在相同浏览器下访问的指协议域名ip相同的页面）也可以访问上面案例所存储的数据

浏览器不会删除我们用localStorage添加的数据（永久存储），除非用户自己清除浏览器。（规范还允许数据因为安全原因被移除，但并没有说明什么样的安全原因需要删除本地数据）

监听存储事件

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

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

如下案例会监听并编录本地存储对象上触发的事件（storage.html）：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <table id="data">
 9     <tr>
10         <th>key</th>
11         <th>oldValue</th>
12         <th>newValue</th>
13         <th>url</th>
14         <th>storageArea</th>
15     </tr>
16 </table>
17 <script>
18     var tableItem=document.getElementById('data');
19     window.onstorage=handleStorage;
20     function handleStorage(e){
21         var row='<tr><td>'+ e.key+'</td><td>'+ e.oldValue+'</td><td>'+ e.newValue+'</td><td>'+ e.url+'</td><td>'+(e.storageArea==localStorage)+'</td></tr>';
22         tableItem.innerHTML+=row;
23     }
24 </script>
25 </body>
26 </html>

在相同的浏览器下同时访问上面两个案例时，在第一个案例每添加或者修改或者clear，都会立马在第二案例中展现出来，注意不能刷新第二案例的，否则第二个案例会无数据。

注意storage事件不会在制造变化的文档内指派，只在其他同源文档里可用