JS之存储篇-Web Storage

引入

Web Storage的目的是解决cookie带来的限制，当数据需要严格控制在客户端时，无需持续的将数据发回服务器。

Web Storage的两个主要目标：提供一种在cookie之外的存储数据的方式、提供一种存储大量可以跨会话存在的数据的机制

Web Storage分为两类：sessionStorage和localStorage。sessionStorage保存的数据用于浏览器的一次会话，当会话结束(通常是该窗口关闭)，数据被清空；localStorage保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。这两个对象的属性和方法完全一样

Web Storage的存储空间要比Cookie大的多，Chrome是2.5MB，Firefox和Opera是5MB，IE是10MB。与Cookie一样，它们也受同域限制，某个网页存入的数据，只有同域下的网页才能读取

存取数据

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

setItem()

setItem(key,value)用于存储数据，它接受两个参数，第一个是键名，第二个是保存的数据

sessionStorage.setItem('name', 'wmui');
localStorage.setItem('name', 'wmui');

getItem()

getItem(key)用于读取数据，它接收一个参数，表示要读取数据的键名

var s = sessionStorage.getItem('name');
var l = localStorage.getItem('name');

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

localStorage.name = 'wmui'; // 存
console.log(localStorage.name); // 取

删除数据

removeItem()

removeItem(key)方法用于删除键名为key的存储项。如果键名不存在不会报错，而是静默失败

localStorage.removeItem('name')
sessionStorage.removeItem('name')

除了使用removeItem()方法，还可以使用delete操作来删除存储项

delete localStorage.name;
delete sessionStorage.name;

clear()

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

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

遍历操作

key()

key(index)方法返回index位置处的存储项的键名

localStorage.name = 'wmui'
localStorage.token =  'asdf'
console.log(localStorage.key(0), localStorage.key(1), localStorage.key(2)) // name token null

length

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

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

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

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

存储事件

无论是sessionStorage还是localStorage，当存取数据和删除数据时都会触发storage事件。storage事件只发生在window对象上，使用DOM0级、DOM2级事件处理函数都可以

只有数据发生改变时才会触发storage事件，也就是说，给已经存在的存储项设置一个一模一样的值，抑或是删除一个本来就不存在的存储项都是不会触发存储事件的

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

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

storage事件的event对象有以下属性:

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

示例

<button id="btn">btn</button>
<script>
  localStorage.name = 'wmui'
  btn.onclick = function() {
    localStorage.name = 'aaa'
  }
  window.onstorage = function(e) {
    console.log(e.url,e.key,e.newValue, e.oldValue,e.storageArea)
  }
</script>

同时打开两个地址为http://127.0.0.1:3030/的窗口，在B窗口点击按钮，A窗口打印信息如下: