本地存储方法以及区别

1.cookie

由服务器产生内容，浏览器收到请求保存本地，当浏览器再次发起请求时都会带上cookie，来证明自己的身份。

2. sessionStorage

储存数据：sessionStorage.setItrm(key,value)

获取数据：sessionStorage.getItem(key)

删除数据：sessionStorage.removeItem(key)

删除所有数据：sessionStorage.clear()

3.localStorage

储存数据：localStorage.setItrm(key,value)

获取数据：localStorage.getItem(key)

删除数据：localStorage.removeItem(key)

删除所有数据：localStorage.clear()

4.区别

存储大小

cookie数据不能超4KB

sessionStorage和localStorage至少5M

有效时间

localStorage

关闭浏览器窗口不会删除数据，除非手动删除

sessionStorage

生命周期为关闭浏览器窗口

cookie

可自己设置时间，如未设置时间，将在关闭浏览器窗口关闭时失效

与服务器的交互

cookie

数据自动传递到服务器

sessionStorage和localStorage

仅在本地保存

使用场景

跟踪用户行为如根据用户的习惯推荐信息，保存登录信息如自动登录的勾选，可使用cookie

长期保存在本地的数据如logo，可使用localStorage

使用敏感账号登录一次，可使用sessionStorage

优缺点

cookie

优点：可设置过期时间；兼容性好

缺点：数据存储少；请求会携带不必要内容，不利于性能；以纯文本在浏览器与服务端进行传递，安全性低；增加网络流量；用户可选择禁用

localStorage 

优点：可永久保存

缺点：数据过多会导致卡顿

sessionStorage

优点：关闭页面可自动清理数据

缺点：数据只能在一个页面窗口访问