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窗口打印信息如下:

JS之存储篇-Web Storage

上一篇:cookie和localstore和sessionstore区别


下一篇:暑期学习与“懒人电商”项目经验总结