前端做本地数据存储的三种方式

cookie

当网页要发http请求时，浏览器会先检查是否有相应的cookie，有则自动添加在request header中的cookie字段中。这些是浏览器自动帮我们做的，而且每一次http请求浏览器都会自动帮我们做。这个特点很重要，因为这关系到“什么样的数据适合存储在cookie中”。

存储在cookie中的数据，每次都会被浏览器自动放在http请求中，如果这些数据并不是每个请求都需要发给服务端的数据，浏览器这设置自动处理无疑增加了网络开销；但如果这些数据是每个请求都需要发给服务端的数据（比如身份认证信息），浏览器这设置自动处理就大大免去了重复添加操作。所以对于那种设置“每次请求都要携带的信息（最典型的就是身份认证信息）”就特别适合放在cookie中，其他类型的数据就不适合了。

特征

1.不同的浏览器存放的cookie位置不一样，也是不能通用的。
2.每个cookie存放的内容大小也是有限制的，不同的浏览器存放大小不一样，一般为4KB。

localStorage(本地存储)

1.数据存储量大
2.不会被发送到服务端
3.持久化本地存储，除非手动删除，否则一直存在
4.在同一个域下，所有窗口共享其中存储的数据

设置
localStorage.setItem('username','zxy');

获取

localStorage.getItem('username');

删除

localStorage.removeItem('username');

sessionStorage

用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。
也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁

设置
sessionStorage.setItem( key, value ) 
获取
sessionStorage.getItem( key ) 
删除
sessionStorage.removeItem( key ) 

sessionStorage 的缺点

sessionStorage 中存储的数据不会被自动随着请求被发送到服务端，可存储的数据大小相比 cookie 来说大了很多，但是每个浏览器都不同，所以没有一个统一的值。其中所存储的数据的生命周期与 session 类似，即只存在于一个会话周期内，当浏览器关闭或标签页关闭时，数据即会被删除（前进和后退并不会影响到数据，因为还在当前的会话中），这就导致了即便是同一个网站，但在不同的标签页和窗口内，也无法共享其中存储的数据

cookie,localStorage,sessionStorage区别