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")
🇨🇳2018-2024 晋ICP备18004820号-4