h5本地存储storage

storage本地存储,似乎有点想起cookie,的确用法也类似于cookie。但是storage较cookie有不少好处:

存储量大;在客户端完成,不会请求客户端;

storage分为sessionStorage和localStorage。

1.sessionStorage  临时存储,当页面关闭的时候,本地存储也就消失。并且sessionStorage的数据是不会共享的。

2.localStorage 永久删除,可以手动删除数据,数据是共享的。

storage下有以下api:

window.sessionStorage和window.localStorage有以下4个方法:

setItem(): 设置数据,keyvalue类型,类型都是字符串 可以用获取属性的形式操作

getItem(): 获取数据,通过key来获取到相应的value removeItem():

删除数据,通过key来删除相应的value

clear(): 删除全部存储的值。用法如下:

window.localStorage.getItem('name')

存储事件:

当数据有修改或删除的情况下,就会触发storage事件。不过,在对数据进行改变的窗口对象上是不会触发的,也就是说有两个及两个以上的窗口,当有数据改变的时候,除了自己本窗口意外的其他窗口对象都会触发storage事件。

该事件的event对象下有以下属性:

Key : 修改或删除的key值,如果调用clear(),key为null

newValue : 新设置的值,如果调用removeStorage(),key为null

oldValue : 调用改变前的value值

storageArea : 当前的storage对象

url : 触发该脚本变化的文档的url

如下:

window.addEventListener('storage',function(ev){  //当前页面的事件不会触
        
        console.log( ev.key );
        console.log( ev.newValue );
        console.log( ev.oldValue );
        console.log( ev.storageArea );
        console.log( ev.url );
        
    },false);
原文地址:https://www.cnblogs.com/toodeep/p/4777403.html