localStorage和sessionStorage的基本使用和区别
作者：互联网
欢迎访问个人博客网站：
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