前端存储Cookie、Session、LocalStrong
2020 年 4 月 23 日 星期四(已编辑)
这篇文章上次修改于 2020 年 10 月 28 日 星期三，可能部分内容已经不适用，如有疑问可询问作者。
如今，与cookie相比，localStorage通常更受青睐，因为它为数据存储和检索提供了健壮且干净的API（另一方面，cookie的使用和理解有些棘手。）
localStorage和sessionStorage是唯一的Web Storage API（意味着，它们提供了一种存储键/值对的机制），但绝对不是唯一的一种在我们的浏览器中用于存储数据的方法。另一个是缓存存储，Cookie和IndexedDB。
Cookie 、Session、LocalStorage、SessionStorage
WEB开发中K-V存储有什么区别？
| Cookie | LocalStorage | SessionStorage | Session | |
|---|---|---|---|---|
| 存储位置 | 客户端 | 客户端 | 客户端 | 服务端 |
| 特点 | 每次请求，都会把cookie放到请求头中来提交 | 不随请求头提交。可长时间保存 | 不随请求头提交，页面关闭即失效 | 安全 |
| 跨页 | 可跨页，不可跨域 | 可跨页、不可跨域 | 不可跨页|域 | 可跨页、不可跨域 |
相同点 : 同域名可用，都是k-v形式存储
因为cookie是运行在客户端的，所以可以用JS来设置cookie。cookie以; 来分割
cookie是有大小限制的，不能超过4kb
查看所有cookie
document.cookie
"_ga=GA1.2.3780489bd361196;name=Tao"
设置cookie
document.cookie = "key=value"
document.cookie = 'name=Luck; age=18'
删除cookie
LocalStorage是Web Storage API中的一种存储机制，允许浏览器使用键值对存储信息。它最适合简单数据值，因为它只能存储字符串。如果必须将LocalStorage用于更复杂的数据，则必须将其解析为JSON并返回。
设置
localStorage.setItem("key","val")
读取
很少使用的API和localStorage的兄弟。sessionStorage是Storage的对象，并且还继承了Storage父类StoragePrototype的方法和属性，就像localStorage一样
设置
读取
/获取当前时间
var date=new Date();
//将date设置为过去的时间
date.setTime(date.getTime()-1);
//将userId这个cookie删除
document.cookie="userId=828; expire="+date.toGMTString();
localStorage.getItem("key")
sessionStorage.setItem("key", "val")
sessionStorage.getItem("key")