码迷,mamicode.com
首页 > 其他好文 > 详细

localStorage和sessionStorage

时间:2019-11-14 00:04:16      阅读:54      评论:0      收藏:0      [点我收藏+]

标签:完全   list   实例   实现   查看   window   nbsp   遍历   获取   

两者都是浏览器端存储数据的接口。除了存储时长,两者完全一致。

不同点:

SessionStorage存储的数据只能用于一次会话(session),当会话结束(浏览器关闭),数据清空;

而LocalStorage长期存在。

1. 特点

1. 以键值对存储;且以文本形式(字符串形式)存储。

2. 读取时存在跨域问题;只能被同域下网页读取。

3. 不同浏览器中,存储量在2.5-10M之间。

2. 实例属性

只有一个length属性

查看存储的个数

localStorage.length
sessionStorage.length

3. 实例方法

1. setItem(key, value)

其中key, value都是字符串

localStorage.setItem(‘a‘, ‘b‘);
sessionStorage.setItem(‘key‘, ‘value‘);
// 也可以直接赋值
localStorage.b = ‘c‘;
sessionStorage[‘c‘] = ‘d‘;

2. getItem(key)

获取key对应的值

window.sessionStorage.getItem(‘key‘)
window.localStorage.getItem(‘key‘)

3. removeItem(key)

删除key对应的值

sessionStorage.removeItem(‘key‘);
localStorage.removeItem(‘key‘);

4. clear()

清空所有存储的值

window.sessionStorage.clear()
window.localStorage.clear()

5. key(Index)

index是0-N的数值,表示第N个存储的内容;

可以配合length属性进行遍历。

4. storage事件

数据存储会触发storage事件。该事件不能在发生变化的页面监听,只能在同一域名下的不同窗口监听。

通过该事件,可以实现窗口之间的通信。

window.addEvenetListener(‘storage‘, function(event) {
    // event有多个属性
    /*
     1. event.key   存储的name,如‘a‘
     2. event.oldValue
     3. event.newValue
     4. event.storageArea 所有的值,如{b: "c", a: "b", length: 2}
     5. event.url  触发事件的页面的url
    */
})

 

localStorage和sessionStorage

标签:完全   list   实例   实现   查看   window   nbsp   遍历   获取   

原文地址:https://www.cnblogs.com/lyraLee/p/11854108.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!