相比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.