JS学习笔记 - localStorage和sessionStorage

简介

HTML5 Web Storage提供了两种在客户端存储数据的新方法 localStorage 和 sessionStorage，挂载在window对象中，二者主要的区别在于生命周期不同。

localstorage为标准的键值对（Key-Value,简称KV）数据类型，简单但也易扩展，只要以某种编码方式把想要存储进localstorage的对象给转化成字符串，就能轻松支持。

把对象转换成json字符串，就能让存储对象了；把图片转换成DataUrl（base64），就可以存储图片了。另外对于键值对数据类型来说，"键是唯一的"这个特性也是相当重要的，重复以同一个键来赋值的话，会覆盖上次的值。

Web Storage 和 cookie 的异同点

相同

• 都可以存储用户数据
• 存储数据的格式都是字符串
• 存储数据的大小有限制

不同

生命周期不同

• localStorage 理论上来说是永久有效的，即不主动清空的话就不会消失，即使保存的数据超出了浏览器所规定的大小，也不会把旧数据清空而只会报错。

• **sessionStorage **的生存期顾名思义，类似于session，只要关闭浏览器（也包括浏览器的标签页），就会被清空。由于sessionStorage的生存期太短，因此应用场景很有限，但从另一方面来看，不容易出现异常情况，比较可靠。

• cookie 的生命周期可以自定义，cookie 可以设置过期时间，数据在过期时间之前可以访问

存储大小限制不同

大部分现代浏览器 Web Storage 的存储限制大小为 5MB，cookie 的存储大小限制为 4KB。

作用域不同

• cookie：是绑定在特定域名下的，当设定了一个cookie后，再给创建它的域名发送请求时，都会包含这个cookie。这个限制保证了储存在cookie中的信息只能让批准的接受者访问，而无法被其他域访问。

• sessionStorage：sessionStorage对象存储特定于某个会话的数据，可以跨越页面刷新而存在。它绑定于某个服务器会话，所以当文件在本地运行时是不可用的。对多页面应用有限制，因为数据只能由最初给对象存储数据的页面访问到。

• localStorage：要访问同一个localStorage对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上。不允许跨域访问

与服务器通信

• cookie 由对服务器的请求来传递，每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题。
• Web Storage 数据不是由每个服务器请求传递的，而是只有在请求时使用数据，不参与和服务器的通信。

易用性

• cookie需要自己封装getCookie，setCookie
• WebStorage 可以使用原生API，也可再次封装

Web Storage API

localStorage 和 sessionStorage 有统一的API接口，下面以localStorage为例介绍API的使用方法。

添加键值对

localStorage.setItem(key,value) 方法用于将值value存储到键key上。

除了使用setItem方法，还可以使用localStorage.key = value或localStorage['key'] = value这两种形式。

注意：key和value的值类型必须为String，如果不是字符串，会调用它们的**toString()**方法将其转换为字符串进行存储。

// 把一个用户名(lilei)存储到 name 的键上
localStorage.setItem('name', 'lilei');
// localStorage.name = 'lilei';
// localStorage['name'] = 'lilei';
// 把一个用户存储到user的键上
localStorage.setItem('user', JSON.stringify(id:1, name:'lilei'));

获取键值

localStorage.getItem(key) 方法用于获取key对应的数据。和setItem方法相同，此方法也可使用value = localStorage.key和value = localStorage['key']形式获取值。

注意：获取到的值为字符串类型，如果需要其他类型，需要手动做类型转换。

// 获取存储到 name 的键上的值
var name = localStorage.getItem('name');
// var name = localStorage.name;
// var name = localStorage['name'];
// 获取存储到user的键上的值
var user = JSON.parse(localStorage.getItem('user'));

删除键值对

localStorage.removeItem(key) 方法删除指定键的项。

注意：localStorage没有数据过期的概念，所有的数据需要开发者手动删除

var name = localStorage.getItem('name'); // 'lilei'
// 删除存储到 name 的键上的值
localStorage.removeItem('name');
name = localStorage.getItem('name'); // null

清除所有键值对

localStorage.clear() 方法用于删除所有的存储内容。

    // 清除 localStorage
    localStorage.clear();
    var len = localStorage.length; // 0

其他方法

判断是否存在键

可以使用Object.hasOwnProperty()方法判断localStorage对象上是否存在某属性。

localStorage.setItem('test','testVal')
localStorage.hasOwnProperty('test') //true

获取localStorage中键值对数量

可以访问localStorage的length属性来获取localStorage对象中存储的键值对数量。

localStorage.setItem('test','testVal')
localStorage.setItem('testB','testValB')
var num = localStorage.length //2

获取 localStorage 的属性名称

localStorage.key(index) 方法用于获取指定索引的键名称。

注意：赋值早的键值对应的索引值大，赋值完的键值对应的索引小, key方法可用于遍历 localStorage 存储的键值

localStorage.setItem('name','lilei');
var key = localStorage.key(0); // 'name'
localStorage.setItem('age', 10);
key = localStorage.key(0); // 'age'
key = localStorage.key(1); // 'name'

通过StorageEvent响应存储的变化

当存储的数据发生变化时，会触发 storage 事件。

但要注意的是它不同于click类的事件会事件捕获和冒泡，storage 事件更像是一个通知，不可取消。

触发这个事件会调用同域下其他窗口的storage事件，不过触发storage的窗口（即当前窗口）不触发这个事件。

storage 的 event 对象的常用属性如下：

  oldValue：更新前的值。如果该键为新增加，则这个属性为null。
  newValue：更新后的值。如果该键被删除，则这个属性为null。
  url：原始触发storage事件的那个网页的网址。
  key：存储store的key名

function storageChanged() {
    
    
    console.log(arguments);
}

window.addEventListener('storage', storageChanged, false);