webStorage的特点

相比cookie,WebStorage可存储的数据量更大(5mb左右)。

相比cookie,webStorage同样保存在客户端,但不与服务器进行交互通信,可节省流量。

WebStorage只能存储字符串类型数据,对于复杂的对象类型数据可以使用ECMAScript提供

的JSON对象的stringify和parse来处理。

以上特点是sessinonStorage和localStorage的共同特点。

他们的不同点在于其生命周期:

sessionStorage对象存储特定于某个对话的数据,也就是他的生命周期为当前的窗口或标签页。

他的有效周期和失效范围遵循以下规则:

1. 当前页面的sessionStorage数据都会在关闭当前页面时销毁。

2.从当前页面同一标签页跳转到非同源页面后,当前页面的sessionStorage数据会销毁;若是

打开了新的标签页,则当前页面的sessionStorage数据不会携带保存到新页面中。

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

4.打开一个标签栏访问某页面并设置seesionStorage,然后在同一标签中该页面跳转到另一个同源页面,则

该sessionStorage数据依然存在。

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

6.打开一个标签栏访问某页面并设置sessionStorage,然后手动(并非该页面点击跳转)在新标签页打开一个同原页面或与原页面地址相同的页面,则新页面并不会存在原页面的sessionStorage数据。

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

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",2);

// 取出数据

ls.getItem("one");

//删除某个键值对

ls.removeItem("one");

//删除全部

ls.clear();

//返回本地存储的个数

ls.length;

sessionStorage操作将localStorage替换成sessionStorage即可

4、WebStorage的应用

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

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

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

原文地址:https://www.cnblogs.com/huayang1995/p/14549753.html