cookie和sessionStorage & localStorage

背景

本文主要围绕What、Why、How这三个方面谈谈sessionStorage 和 localStorage的联系与区别。

What

sessionStorage 和 localStorage 都是BOM提供给我们在浏览器上进行本地存储数据的API，利用它我们可以实现在本地浏览器存储一些数据。这两个方法都是隶属于 Window这个顶级BOM下的，在需要的时候我们直接调用即可。

Why

在某些场合下我们希望能够在用户本地的浏览器上存储一些数据以提高用户体验，所以本地存储技术就应运而生了。典型的应用场景就是我们在登录网站时希望下次登录网站能够记住我们的账号，以免再重新输入。这种时候就可以使用localStorage进行一个本地存储用户名，在用户加载完页面的时候就检测用户浏览器上有无存储相应账号数据，若有则自动填入。

How

在使用方式上sessionStorage和localStorage是类似的

window.sessionStorage

存储数据：

sessionStorage.setItem(key, value)

获取数据：

sessionStorage.getItem(key)

删除数据：

sessionStorage.removeItem(key)

清空数据：(所有都清除掉)

sessionStorage.clear()

window.localStorage

存储数据：

localStorage.setItem(key, value)

获取数据：

localStorage.getItem(key)

删除数据：

localStorage.removeItem(key)

清空数据：(所有都清除掉)

localStorage.clear()

cookie和sessionStorage & localStorage的特点

  1. 存储容量约为4KB
  2. 同源页面可以共享
  3. 有path的概念，可以将cookie限制在某个路径下
  4. 会随着http头发送给服务端

sessionStorage

  1. 存储容量约为5MB
  2. 同一个页面下可以共享数据
  3. 生命周期到页面关闭。当页面关闭后存储在浏览器上数据就会被清除，不会保留下来下次打开页面就没有数据了
  4. 存在本地端，不会发送给服务端

localStorage

  1. 存储容量约为5MB
  2. 同源页面共享数据，可以跨页面共享数据
  3. 生命周期为永久，仅当我们手动删除时才会清除数据，否则下次打开页面或者浏览器数据依然存在
  4. 存在本地端，不会发送给服务端

sessionStorage & localStorage 共同点

  1. 数据都存储在用户的浏览器中
  2. 数据都以键值对的形式存储
  3. 仅能存取字符串，可以将对象JSON.stringify() 编码后存储
  4. 读取方便，刷新页面也不会丢失数据

localStorage & cookie共同点

  1. 同源页面可以共享数据