html5本地存储之sessionStorage与localStorage的异同

最新推荐文章于 2024-08-15 20:33:20 发布

悄悄小土豆

最新推荐文章于 2024-08-15 20:33:20 发布

阅读量1.6k

点赞数 1

分类专栏： html5 文章标签： html5 存储

html5 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

sessionStorage与 localStorage 的异同

sessionStorage 和 localStorage 就一个不同的地方， sessionStorage数据的存储仅特定于某个会话中，也就是说数据只保持到浏览器关闭，当浏览器关闭后重新打开这个页面时，之前的存储已经被清除。而 localStorage 是一个持久化的存储，它并不局限于会话。

sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历，例如下面的代码：

var storage = window.localStorage;for (var i=0, len = storage.length; i < len; i++){var key = storage.key(i);var value = storage.getItem(key);console.log(key + "=" + value);}

sessionStorage 和 localStorage的clear()函数的用于清空同源的本地存储数据，比如localStorage.clear()，它将删除所有同源的本地存储的localStorage数据，而对于Session Storage，它只清空当前会话存储的数据。

关闭页面会导致 sessionStorage 的数据被清除，但刷新或重新打开新页面数据还是存在，如果需要存储的只是少量的临时数据。我们可以使用sessionStorage 。或者做页面间的小交互。

sessionStorage 和 localStorage具有相同的方法storage事件，在存储事件的处理函数中是不能取消这个存储动作的。存储事件只是浏览器在数据变化发生之后给你的一个通知。当setItem(),removeItem()或者clear() 方法被调用，并且数据真的发生了改变时，storage事件就会被触发。注意这里的的条件是数据真的发生了变化。也就是说，如果当前的存储区域是空的，你再去调用clear()是不会触发事件的。或者你通过setItem()来设置一个与现有值相同的值，事件也是不会触发的。当存储区域发生改变时就会被触发，这其中包含许多有用的属性：

storageArea: 表示存储类型（Session或Local）
key:发生改变项的key
oldValue: key的原值
newValue: key的新值
url*: key改变发生的URL
* 注意: url 属性早期的规范中为uri属性。有些浏览器发布较早，没有包含这一变更。为兼容性考虑，使用url属性前，你应该先检查它是否存在，如果没有url属性，则应该使用uri属性

如果调用clear()方法，那么key、oldValue和newValue都会被设置为null。

PS.在firefox和chrome中存储和读取都是正常的, 但是对storage事件的触发似乎有点问题, 自身页面进行setItem后没有触发window的storage事件, 但是同时访问A.html和B.html, 在A页面中进行 setItem能触发B页面中window的storage事件, 同样的在B页面中进行setItem能触发A页面中window的storage事件. 在IE9中, 页面自身的设值能触发当前页面的storage事件,同样当前页面的设值能触发同一”起源”下其他页面window的storage事件,这看起来似乎更让人想的通些。

///

localStorage的使用

最近有同事反映html5本地存储的问题，由于数据量较大，在手机端会莫名其妙的丢失。后来经过测试，发现安卓机型实际本地存储的空间只有3M左右。由于之间有很多json请求的时候连接用的问号传参且将数据保存到了本地，导致本地出现大量的缓存如 a.asp?id=1 a.asp?id=2 b.asp?id=1

一直头疼怎么干掉这些缓存数据，今天在网上看到了一则有关localStore使用的帖子，分享给大家。当然办法可能还有一种， localStorage 应该是一个数组对象，遍历一遍逐个判断key开头的四个字母是否为http决定是否删除，处理我的问题这个应该比较适合，当然我自己并未尝试过，希望大家有尝试过的分享下结果给我。

HTML5中提供了localStorage对象可以将数据长期保存在客户端，直到人为**。
localStorage提供了几个方法:
1、存储：localStorage.setItem(key,value)
如果key存在时，更新value

2、获取：localStorage.getItem(key)
如果key不存在返回null

3、删除：localStorage.removeItem(key)
一旦删除，key对应的数据将会全部删除

4、全部删除：localStorage.clear()
某些时候使用removeItem逐个删除太麻烦，可以使用clear,执行的后果是会删除所有localStorage对象保存的数据

5、遍历localStorage存储的key
.length 数据总量，例：localStorage.length
.key(index) 获取key，例：var key=localStorage.key(index);

6、存储JSON格式数据
JSON.stringify(data) 将一个对象转换成JSON格式的数据串,返回转换后的串
JSON.parse(data) 将数据解析成对象，返回解析后的对象

备注：localStorage存数的数据是不能跨浏览器共用的，一个浏览器只能读取各自浏览器的数据,储存空间5M。

帖子原地址:http://blog.sina.com.cn/s/blog_6d01cce30101jrdw.html