Cookie LocalStorage sessionStorage

数据的生命周期

1. Cookie 一般由服务器生成，可设置失效时间，如果在浏览器端生成 Cookie，默认是关闭浏览器后失效
2. LocalStorage 除非被清除，否则永远保存
3. sessionStorage 仅在当前会话下有效，关闭页面或浏览器后被清除

存放数据大小

1. Cookie 4K 左右
2. LocalStorage 一般为 5MB
3. sessionStorage 一般为 5MB

与服务器端通信

1. Cookie 每次都会携带在 HTTP 头中，如果使用 Cookie 保存过多数据会带来性问题
2. LocalStorage sessionStorage 仅在客户端（浏览器）中保存，不参与和服务器的通信

区别

1. cookie 数据始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏览器和服务器间来回传递，而 sessionStorage 和 localStorage 不会自动把数据发送给服务器，仅在本地保存。cookie 数据还有路径 path 的概念，可以限制 cookie 只属于某个路径下
2. 存储大小限制也不同，cookie 数据不能超过 4K，同时因为每次 http 请求都会携带 cookie、所以 cookie 只适合保存很小的数据，如会话标识。sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大
3. 数据有效期不同

• sessionStorage：仅在当前浏览器窗口关闭之前有效
• localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据
• cookie：只在设置的 cookie 过期时间之前有效，即使窗口关闭或浏览器关闭

4. 作用域不同
   sessionStorage 不在不同的浏览器窗口中共享
   即使是同一个页面 localstorage 在所有同源窗口中都是共享的
   cookie 也是在所有同源窗口中都是共享的

使用

1. Cookie

document.cookie = name+'='+value[;expires=date][;path=路径][;domain=域名]

2. localStorage(永久的)sessionStorage(临时的)

setItem(key,val) //设置
getItem(key) //获取
removeItem(key) //删除

//localStorage
localStorage.setItem(key,val)
localStorage.getItem(key)
localStorage.removeItem(key)

//sessionStorage
sessionStorage.setItem(key,val)
sessionStorage.getItem(key)