SessionStorage、LocalStorage、Cookie的比较

总述

无论是 Session Storage 还是 Local Storage 亦或者是 Cookie 都是浏览器将特定接口返回的数据保存至本地，只不过这些存储有着或多或少的差异，Session Storage 作用于当前话术，浏览器生成的 Cookie 关闭浏览器默认失效，Local Storage 则永久保留，除非你去清除一下浏览器缓存。原生 Cookie 接口不友好，Local Storage 和 Session Storage 原生接口较为友好

一.Session Storage

• 生命周期
  当前窗口或者标签页，一旦当前窗口或者标签页被永久关闭了，那么所有存储其中的数据也将被清空

• 作用域
  不同浏览器之间无法共享，同一浏览器不同标签页或者页面无法共享，如果是同源页面也是可以共享的，同源保证协议相同，主机名相同，端口相同

• 存储空间

  一般为 5M 左右

• js 代码写法

  window.sessionStorage.setItem('token', 'xxx')
  window.sessionStorage.getItem('token')
  

二.Local Storage

• 生命周期

  永久，甚至在浏览器关闭之后，除非用户自己去清理浏览器缓存，否则这些信息会一直存在

• 作用域
  不同浏览器之间无法共享，同一浏览器不同标签页或者页面可以共享

• 存储空间
  一般为 5M 左右

• js 代码写法

  window.localStorage.setItem('token', 'xxx')
  window.localStorage.getItem('token')
  

三.Cookie

• 生命周期
  浏览器端生成的 Cookie 默认是在浏览器关闭后失效

• 作用域

• 存储空间
  一般为 4K 左右

• js 代码写法

  document.cookie='username=Zhang San'
  document.cookie
  

  注意这个 document.cookie 实际上获取的 cookie 不全！