localStorage和sessionStorage的基本使用和区别

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数据依然存在。

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

6：打开一个标签栏访问某页面并设置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。