Vue28

2022-07-20 15:38:36 阅读：167 来源： 互联网

标签：username 浏览器 sessionStorage Vue28 window localStorage Cookie

https://www.jianshu.com/p/513f6949fc25

1 简介

　　Web Storage 包括 localStorage 和 sessionStorage ，是浏览器本地数据存储的另一个方案，最开始提出来是为了弥补 Cookie 本地化数据存储的缺陷（存储量小、每次请求都会携带 Cookie 加大了额外的开销等）。localStorage 和 sessionStorage 两个对象都可以通过浏览器 window 对象访问到。它们保存的数据都是以键值对（key-value）的形式存在的

2 localStorage

2.1 简介

　　通过 window 的 localStorage 属性可以访问到当前页面的一个对象（Storage），这个对象是当前源（window.location.origin）保存的浏览器会话数据，它保存的数据是持久化的会长期保留，即使你关闭浏览器下次重新打开该页面，保存的数据依然还在不会被清空。而且在相同源（window.location.origin）的其他页面都是可以通过 localStorage 访问到，当然了源与源之间的 localStorage 是不能互相访问的。即每个源之间的 localStorage 是相互独立的

2.2 获取localStorage 对象

let data = window.localStorage
// 在浏览器环境下也可以省略 window
let data2 = localStorage

2.3 在localStorage中存储数据

localStorage.setItem('username','frontEndCoderZ')

2.4 访问localStorage中的数据

localStorage.setItem('username','frontEndCoderZ')
let username = localStorage.getItem('username')
console.log(username); // frontEndCoderZ

2.5 删除localStorage数据

localStorage.setItem('username','frontEndCoderZ')
localStorage.removeItem('username')

2.6 清空localStorage数据

localStorage.clear();

3 sessionStorage

　　与 localStorage 类似，它也是个 Storage 对象，不同之处在于 sessionStorage 有它的生命周期，不是长期保存的。在一个会话结束时(关闭浏览器/关闭浏览器页面标签 tab)，sessionStorage里面的相关数据就会被清空。

　　它的api和localStorage完全一致

4 小结

　　Web Storage 分为 localStorage 和 sessionStorage, 是本地化数据储存的另一个方案（弥补 Cookie 的不足），它被保存在本地，不会被浏览器携带至服务器（Cookie 会）。Cookie 存储的大小限制一般是不会超过 4kb（浏览器不同会有差异），Web Storage 一般能存储 5MB 左右。使用场景也不同，Cookie 一般用于安全验证（如用户验证信息会被携带至服务器），Web storage 一般用于保存用户操作的后的某个状态（用户刷新页面或重新进入页面回显之前的操作状态）。

标签：username,浏览器,sessionStorage,Vue28,window,localStorage,Cookie
来源： https://www.cnblogs.com/jthr/p/16498190.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9