webstorage html5,HTML5-WebStorageAPIs的简述

5268f80b9b1e01f982625ef6fac83ca1.png

1.概述

Web Storage是一种在客户端存储数据的方法。比起Cookie,Web Storage更加安全,能够存储更多对象,而不仅仅是字符串;Web Storage能够存储更大的数据,而不是像只能够存储几KB数据的Cookie;Web Storage还可以减少数据在客户端与服务器间的转换,减少带宽。

Web Storage的核心是是window对象的两个子对象sessionStorage和localStorage。数据以键值对的形式通过这两个对象存储,这两个对象都实现了storage接口,拥有名称相同的属性和方法,用法也相同。不同之处是二者的存储时间和共享范围。

sessionStorage数据存储时间依赖于存储它的浏览器窗口或选项卡存在的时间,共享范围也是只在产生它的浏览器窗口或选项卡内。

localStorage数据存储时间要超过浏览器的打开时间,除非通过手动或者代码删除,其共享范围是同源(origin)网站的页面间。

许多浏览器不支持sessionStorage访问本地文件系统,因此要通过Web服务器使用。

Web Storage的规范允许存储任何类型数据,但在各浏览器实现上多数值允许存储字符串文本数据,但可以使用Web Storage结合JSON技术存储非文本数据。

更高级的数据存储方法是Web SQL Database,用于基于索引的数据库存储,并具有SQL查询语言SQLite。Web SQL Database目前仅被Safari,Chrome和Opera支持。最终的规范很可能不采用这种方式。另外一种方法是IndexedDB,仅FireFox 4以上版本支持。

2.浏览器支持检测function checkStorageSupport() {

//sessionStorage

if

(window.sessionStorage) {

alert('This browser supports sessionStorage');

}

else

{

alert('This browser does NOT support sessionStorage');

}

//localStorage

if (window.localStorage) {

alert('This browser supports localStorage');

} else {

alert('This browser does NOT support localStorage');

}

}

3.Storage接口interface Storage {

//同源键值对的数目

readonly attribute unsigned long length;

//通过索引获取键,索引从0开始

getter DOM

String

key

(in unsigned long index);

//通过键获取值,键若不存在,值将返回

null

getter any getItem(in DOMString key);

//存储键值对,若已存在同名键,则值将被覆盖。若用户关闭了浏览器存储或是已超 //过允许存储的最大值,都将产生QUOTA_EXCEEDED_ERR错误。

set

ter creator void setItem(in DOMString key, in any data);

//通过键删除值,不存在则什么也不做

delete

r void removeItem(in DOMString key);

//删除storage中所有键值对,若为空则什么也不做

void

clear

();

};

4.读取和存储数据//---------------方式一--------------

//存储数据

window.sessionStorage.setItem(‘myFirstKey’, ‘myFirstValue’);

//读取数据

alert(window.sessionStorage.getItem(‘myFirstKey’));

//---------------方式二--------------

//存储数据

window.sessionStorage.myFirstKey = ‘myFirstValue’;

//读取数据

alert(window.sessionStorage.myFirstKey);

//---------------方式三--------------

var varKey = sessionStorage.key(index);

window.sessionStorage[varKey] =

new

Value;

5.存储事件

Web Storage与其它页面、浏览器窗口或选项卡、Web Worker间的通信可以通过存储事件来进行。同源的对象都可以监听storage事件。添加storage事件监听方法如下:window.addEventListener("storage", displayStorageEvent, true);

6.StorageEvent接口

storage事件对象实现了StorageEvent接口,该接口的声明如下:interface StorageEvent : Event {

readonly attribute DOMString key;

readonly attribute any oldValue;

readonly attribute any newValue;

readonly attribute DOMString url;

//该方法提供了一个对发生storage事件对象的

引用

,这个对象可以是

//sessionStorage或localStorage

readonly attribute Storage storageArea;

};

6.处理最大配额

多数浏览器所允许的Web Storage不超过5MB,为了防止存储数据时产生超出配额的限制,可以使用捕获QUOTA_EXCEEDED_ERR异常的方法来处理,例如:try

{

sessionStorage["name"] = "Tabatha";

}

catch (

exception

)

{

if (exception == QUOTA_EXCEEDED_ERR)

{

// we should tell the user their quota has been exceeded.

}

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值