前端必知必会的存储cookie,sessionStorage,localStorage的区别及应用场景

前端有三种存储方式，分别是cookie sessionStorage localStorage

其中sessionStorage，localStorage是H5的新特性，这一点是要明白的。

cookie

特性

cookie的存储的比较小，大概只有4kb左右。它主要是为了与客户端交传递信息（存在headers请求头体）。每一次请求都会主动带上cookie的内容。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。而这也是他最终应用场景的由来。

应用场景

1、实现网站的自动登录（记住密码）
2、保存上次登录的时间等信息。
3、统计次数（广告弹出）

sessionStorage

特性

sessionStorage也叫会话存储，也是一种客户端本地的存储方式，存储大小为5M。sessionStroge只在当前浏览器关闭之前有效

应用场景

因为他仅仅能保存当前的会话，这也是他的特性，他的应用场景如下
1、保存一次 性会话的敏感内容，比如一次性账号

localStorage

特性

sessionStorage也叫本地存储，也是一种客户端本地的存储方式，存储大小为5M。与sessionStroge不同。localStorage是保存在本地，只要不主动删除，将一直存在。

应用场景

1、就比如自带草稿功能，每隔几秒钟或几分钟自动保存当前编辑的内容，刷新页面，或是把浏览器关掉重新打开编辑页面可以自动恢复之前编辑的内容的。