标签：存储 区别 sessionStorage localStorage WebStorage 数据 页面

欢迎访问个人博客网站：
http://www.zhuxin.club

1. WebStorage简介

在WebStorage出现之前，浏览器中存储本地数据基本使用技术的只能是cookie，并且cookie需要频繁的地服务器端进行传输交互。Web Storage是HTML5标准提出的新的浏览器本地存储方案，它的出现克服了由cookie带来的一些限制，例如当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。

Web Storage出现的目的：

• 提供一种在cookie之外存储会话数据的途径。
• 提供一种存储大量可以跨会话存在的数据的机制。

Web Storage 包括sessionStorage 和localStorage两种技术，分别适用于不同的场景需求。

2. WebStorage的特点

• 相比cookie，WebStorage可存储的数据量更大（5MB左右）。
• 相比cookie，WebStorage同样保存在客户端，但不与服务器进行交互通信，可节省流量。
• WebStorag只能存储字符串类型数据，对于复杂的对象类型数据可以使用ECMAScript提供的JSON对象的stringify和parse来处理。

以上特点是sessionStorage和localStorage的共同点，他们的不同点在于其生命周期：

sessionStorage对象存储特定于某个对话的数据，也就是它的生命周期为当前窗口或标签页。它的有效周期和失效范围遵顼以下规则：

1：任何时候，当前页面的sessionStorage数据都会在关闭当前页面或者跳转到非同源页面时（无论是否是同一标签页）销毁。

2：打开一个标签栏访问某页面并设置sessionStorage，然后原地刷新，则该sessionStorage数据依然存在。

3：打开一个标签栏访问某页面并设置sessionStorage，然后在同一标签栏中由该页面跳转到另一个同源页面，则该sessionStorage数据依然存在。

4：打开一个标签栏访问某页面并设置sessionStorage，然后由该页面打开一个新标签栏跳转到另一个同源页面，则新页面sessionStorage数据与原页面相同，并且此时新页面与旧页面sessionStorage数据相互独立，互不影响。

5：打开一个标签栏访问某页面并设置sessionStorage，然后手动（并非从该页面点击跳转）在新标签页打开一个同源页面或与原页面地址相同的页面，则新页面并不会存在原页面的sessionStorage数据。

localStorage数据对于同源页面（无论是否是同一标签栏）是共享公用的，并且只要你不去主动删除，它会永久保存在浏览器中。

3. WebStorage操作

sessionStorage和localStorage都属于WebStorage，他们拥有相同的操作API。下面以localStorage为例介绍其操作：

• setItem(key,value)
• getItem(key)
• removeItem(key)
• clear()
• length
• key(n) 返回第n个key的名称

let ls=window.localStorage;

// 保存数据
ls.setItem("one",1);
// 取出数据
ls.getItem("one");//1
// 删除某个键值对
ls.removeItem("one");
// 删除全部
ls.clear();
// 返回本地存储的个数
ls.length;

sessionStorage操作将localStorage替换成sessionStorage即可

4. WebStorage的应用

只要需要在浏览器存储本地数据的场景都可以适用WebStorage。根据sessionStorage和localStorage生命周期的不同，他们又有各自专门擅长的应用场景：

sessionStorage适合存储于当前会话相关的数据，比如用户登录状态以及用户信息的存储，SPA单页面应用页面相关数据的存储。

localStorage则适合缓存针对同源页面一些长期有效的数据，除非用户手动删除。需要保存长期登录状态的也适合用localStorage。

标签：存储,区别,sessionStorage,localStorage,WebStorage,数据,页面
来源： https://blog.csdn.net/qq_43293207/article/details/111827618

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