Javascript is required
前端存储Cookie、Session、LocalStrong
前端

如今，与cookie相比，localStorage通常更受青睐，因为它为数据存储和检索提供了健壮且干净的API（另一方面，cookie的使用和理解有些棘手。）

localStorage和sessionStorage是唯一的Web Storage API（意味着，它们提供了一种存储键/值对的机制），但绝对不是唯一的一种在我们的浏览器中用于存储数据的方法。另一个是缓存存储，Cookie和IndexedDB。

Cookie 、Session、LocalStorage、SessionStorage

WEB开发中K-V存储有什么区别？

CookieLocalStorageSessionStorageSession
存储位置客户端客户端客户端服务端
特点每次请求，都会把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

/获取当前时间
var date=new Date();
//将date设置为过去的时间
date.setTime(date.getTime()-1);
//将userId这个cookie删除
document.cookie="userId=828; expire="+date.toGMTString();

LocalStorage

LocalStorage是Web Storage API中的一种存储机制，允许浏览器使用键值对存储信息。它最适合简单数据值，因为它只能存储字符串。如果必须将LocalStorage用于更复杂的数据，则必须将其解析为JSON并返回。

基本使用

设置

localStorage.setItem("key","val")

读取

localStorage.getItem("key")

SessionStorage

很少使用的API和localStorage的兄弟。sessionStorage是Storage的对象，并且还继承了Storage父类StoragePrototype的方法和属性，就像localStorage一样

基本使用

  • clear
  • getItem
  • key
  • removeItem
  • setItem
  • length

设置

sessionStorage.setItem("key", "val")

读取

sessionStorage.getItem("key")