Html5本地存储之Web Storage

Web存储最初作为HTML5的一部分被定义成API形式，但是后来被剥离出来作为独立的一份标准了。Web存储标准所描述的API包含localStorage对象和sessionStorage对象，这两个对象实际上是持久化关联数组，是名值对的映射表，“名”和“值”都是字符串。Web存储易于使用、支持大容量(但非无限量)数据存储同时兼容当前所有主流浏览器。本文将详细介绍Web Storage

概述

[注意]IE浏览器不支持在本地使用storage

存取数据

sessionStorage和localStorage保存的数据，都以“键对”的形式存在。也就是说，每一项数据都有一个键名和对应的值。所有的数据都是以文本格式保存

[注意]Storage类型只能存储字符串。非字符串的数据在存储之前会被转换成字符串

1.【setItem()】

存入数据使用setItem方法。它接受两个参数网页保存到本地，第一个是键名，第二个是保存的数据

[注意]不同的浏览器存入的Storage位置不一样，不能通用

sessionStorage.setItem("key","value");
localStorage.setItem("key","value");

2.【getItem()】

读取数据使用getItem方法。它只有一个参数，就是键名

var valueSession = sessionStorage.getItem("key");
var valueLocal = localStorage.getItem("key");

除了使用setItem()和getItem()方法之外，还可以使用属性来存取数据

localStorage.setItem("key1","value1");
localStorage.testkey = 'testvalue';
console.log(localStorage.getItem('testkey'));//'testvalue'
console.log(localStorage.key1);//'value1'

清除数据

1.【removeItem()】

removeItem()方法用于清除某个键名对应的数据

[注意]清除不存在的键名不会报错，只会静默失败

sessionStorage.removeItem('key');
localStorage.removeItem('key');

除了使用removeItem()方法，还可以使用delete操作来清除数据

[注意]IE7-浏览器不支持delete操作符来清除storage数据

localStorage.setItem("key1","value1");
delete localStorage.key1;
console.log(localStorage.key1);//undefined
console.log(localStorage.getItem('key1'));//null

2.【clear()】

clear方法用于清除所有保存的数据

sessionStorage.clear();
localStorage.clear();

遍历操作

1.【key()】

key(index)方法返回index位置处的值的名字

sessionStorage.setItem("key1","value1");
sessionStorage.setItem("key2","value2");
console.log(sessionStorage.key(0));//'key1'
console.log(sessionStorage.key(1));//'key2'
console.log(sessionStorage.key(2));//null

2.【length】

length属性返回名值对儿的个数

console.log(sessionStorage.length);//2

利用length属性和key()方法，可以遍历所有的键

for(var i = 0; i < localStorage.length; i++){
    var key = localStorage.key(i);
    var value = localStorage.getItem(key);
}

还可以使用for-in循环来迭代

for(var key in localStorage){
    var value = localStorage.getItem(key);
}

存储事件

首先，要特别注意的是，该事件只发生在window对象上，在document对象上触发无效，且使用DOM0级、DOM2级事件处理函数都可以

无论对sessionStorage还是localStorage进行操作，都会触发storage事件。当通过属性或setItem()方法保存数据，使用delete操作符或removeItem()删除数据，或者调用clear()方法时，都会发生该事件

[注意]只有当存储数据真正发生改变的时候才会触发存储事件。像给已经存在的存储项设置一个一模一样的值，抑或是删除一个本来就不存在的存储项都是不会触发存储事件的。通过getItem()方法获取数据也不会触发该事件

一般地，storage事件不在导致数据变化的当前页面触发。如果浏览器同时打开一个域名下面的多个页面，当其中的一个页面改变sessionStorage或localStorage的数据时，其他所有页面的storage事件会被触发，而原始页面并不触发storage事件。可以通过这种机制，实现多个窗口之间的通信

[注意]IE8-浏览器不支持storage事件，IE9+浏览器与其他标准浏览器有所不同，无论数据真实值是否变化，只要对数据进行设置或删除网页保存到本地，都会触发该事件，且原始页面和同一域名下的其他页面都会触发

这个事件的event对象有以下属性

url:触发事件的链接地址
key:设置或者删除的键名
newvalue:如果是设置值，则是新值；如果是删除键，则是null
oldValue:键被更改之前的值
storageArea:返回触发事件的对

-- 原始页面 -->
<div>改变输入框中的值，再点击按钮，会触发storage事件div>
<button id="btn">按钮button>
<input type="text"  id="test">
<div id="result">div>
<script>
    btn.onclick = function(){
        localStorage.setItem("key",test.value);
    }
    window.onstorage = function(e){
        e = e || event;
        result.innerHTML = 'key: ' + e.key + '
oldValue: ' + e.oldValue + '
newValue: ' + e.newValue + '
url: ' + e.url + '
storageArea: ' + e.storageArea;  
    }
script>

<div id="result">div>
<script>
    window.onstorage = function(e){
        e = e || event;
        result.innerHTML = 'key: ' + e.key + '
oldValue: ' + e.oldValue + '
newValue: ' + e.newValue + '
url: ' + e.url + '
storageArea: ' + e.storageArea;  
    }
script>