html5 dom存储,浅谈HTML 5的DOM Storage机制(2)

使用 DOM Storage 需要注意的几点

保存在 Storage 对象的数据类型

当使用 DOM Storage 进行本地存储时,任何数据格式在 Storage 对象中都以字符串类型保存,所以如果保存的数据不是字符串,在读取的时候需要自己进行类型的转换。这里我们使用 JSON 将对象序列化之后再存储。

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写,同时也易于机器解析和生成。目前,JSON 已经是 JavaScript 标准的一部分,主流的浏览器对 JSON 支持都非常完善。

本文用到两个相关的函数

JSON.parse() 函数会把 JSON 对象转换为原来的数据类型。

JSON.stringify() 函数会把要保存的对象转换成 JSON 对象保存。

在清单 4 中,先把一个布尔型的数据存到 Storage 对象中,然后再取出,可以看到布尔类型的数据在取出的时候变为字符串。接下来换一种方式保存数据,先用 JSON.stringify 方法序列化数据,然后保存到 Storage 对象中,在取出的时候用 JSON.parse 方法进行反序列化,可以看到读取出的数据还是布尔类型。

另外,使用 JSON 保存一个字符串,通过 Chrome 的 Storage 工具,可以看到存入的字符串两边有双引号,这个双引号表示存入的是一个字符串。当用 JSON 表示一个简单的字符串时,会在字符串两边加上双引号。最后,该页面加载后的输出如下:

string1 boolean2 string3

清单 4. 使用 JSON 对 DOM Storage 的复杂数据进行处理

// 生成一个 Boolean 类型的变量 data1

vardata1=newBoolean(true);

// 不用 JSON 处理数据

sessionStorage["key1"] = data1;

if(sessionStorage["key1"] == "true"){

// 从 Storage 对象读取出来的数据 data1 变为 String 类型

document.write("string1 ");

}

// 使用 JSON 处理数据 data1

sessionStorage["key2"] = JSON.stringify(data1);

if(JSON.parse(sessionStorage["key2"]) == true){

// 从 Storage 对象读取的数据 data1,用 JSON 将变量转换为原来的 Boolean 类型

document.write("boolean2 ");

}

// 生成一个 String 类型的变量

vardata2=newString("true");

// 使用 JSON 处理数据,在 Storage 对象中保存的是 “string”

sessionStorage["key3"] = JSON.stringify(data2);

data2=JSON.parse(sessionStorage["key3"]);

if(data2== "true"){

// 变量转换回来还是 String 类型

document.write("string3");

}

使用 Chrome 浏览器可以查看当前的 sessionStorage 和 localStorage 的键值对。在工具栏选择“工具”到“开发人员工具”到“Resources”到“Local Storage”或“Session Storage”, 可以查看 key 和 value。

图 1. Chrome 浏览器的 Storage 工具栏

7c147a6e881a9fef5117a407a0e2a35c.png

综上所述,我们可以如清单 5 一样,在加载页面的时候用 JSON 转换数据类型,在离开页面的时候将数据保存为 JSON 对象。这样,保存在 Storage 中任何类型的数据在读取的时候都可以转换为原来的类型。

清单 5. 使用 JSON 对 DOM Storage 的复杂数据进行处理

var value;

function loadValue() {

value1=JSON.parse(window.sessionStorage.getItem(“key1”));

}

function saveValue() {

window.sessionStorage.setItem(“key1”) = JSON.stringify(value1);

}

window.addEventListener(“load”, loadValue. true);

window.add

var value;

function loadValue() {

value1 = JSON.parse(window.sessionStorage.getItem(“key1”));

}

function saveValue() {

window.sessionStorage.setItem(“key1”) = JSON.stringify(value1);

}

window.addEventListener(“load”, loadValue. true);

window.addEventListener(“unload”, saveValue. true);

空间大小

HTML5 的建议是每个网站提供给 Storage 的空间是 5MB,一般来说足够存字符串。如果存入的数据太大,有些浏览器如 Chrome 会抛出 QUOTA_EXCEEDED_ERR 异常。所以虽然 DOM Storage 提供的空间比 cookie 要大很多,但在使用需要注意限制。

图 2. Chrome 浏览器抛出异常

d0b4c99cf0cf9e5d23c21bdc4ac31b63.png

安全性

一般不要在客户端存储敏感的信息,使用 localStorage、globalStorage 等在客户端存储的信息都非常容易暴露。应该在完成数据存储后使用 clear 或者 removeItem 方法清除保存在 Storage 对象中的数据。

存储事件驱动

如果想在存储成功或修改存储的值时执行一些操作,可以用 DOM Storage 接口提供的事件。可以使用如下方法注册事件:

window.addEventListener(“storage”, handleStorageEvent, false);

存储事件接口定义

interface StorageEvent : Event {

readonly attribute DOMString key;

readonly attribute any oldValue;

readonly attribute any newValue;

readonly attribute DOMString url;

readonly attribute Storage storageArea;

void initStorageEvent(in DOMString typeArg, in boolean canBubbleArg,

in boolean cancelableArg, in DOMString keyArg, in any oldValueArg,

in any newValueArg, in DOMString urlArg, in Storage storageAreaArg);

};

key:发生改变的键。

oldValue:键改变之前的值。

newValue:键改变之后的值。

url:触发存储事件的页面 url。

在清单 6 中注册完存储事件后,当 sessionStorage 或者 localStorage 对象的值发生改变时,会触发 handleStorageEvent 函数,在页面显示发生改变的键和改变之前与之后的值。

清单 6. 添加存储事件

// 显示存储事件的相关内容

function handleStorageEvent(e) {

document.write(“key” + e.key + “oldValue” + e.oldValue + “newValue” + e.newValue);

}

// 添加存储事件监听

window.addEventListener(“storage”, handleStorageEvent, false);

使用 Dojo 实现之前用户注册的功能

Dojo 是一个 JavaScript 实现的开源工具包,很大程度上屏蔽了浏览器之间的差异性。Dojo 扩展库 (dojox) 是 Dojo 在其基本库、核心库和 Dijit 库的基础上提供的一个非常丰富的组件仓库。本文用到的 dojox.storage 模块能够将数据保存在本地存储中,实现和之前 DOM Storage 一样的功能。

由于一些老版本浏览器不支持 HTML5,我们还可以用 Dojo 来实现之前用户注册的功能。相对于 HTML5 的 DOM Storage 接口,Dojo 的 dojox.storage.Provider 接口提供的方法更多。这里我们列出几个常用的方法。

get(key, namespace):返回指定键对应的值。

put(key, value, resultsHandler, namespace):存入一个键值对。

remove(key, namespace):删除指定的键值对。

clear(namespace):删除对象中的所有键值对。

现在对第一个表单的 JavaScript 代码做部分修改,并在页面中引入 dojox.storage 模块。这样,程序在不支持 HTML5 的浏览器中能够通过调用 Dojo 提供的方法正常运行。dojo.require("dojox.storage") 表示引入 dojox.storage 功能模块。然后通过 dojox.storage.manager.isInitialized() 查看 dojox.storage.manager 是否已经初始化,如果没有的话,则需要等待其初始化完成之后,再进行存储操作。

清单 7. 经过修改后的第一个表单页面的部分代码

dojo.require("dojox.storage");

// 当退回到第一个页面时,从 Storage 中得到用户之前输入的值并显示在页面,方便修改

// 这里先进行 dojox.storage.manager 的初始化

if(!dojox.storage.manager.isInitialized()){

dojo.connect(dojox.storage.manager, "loaded", saveAndLoad);

} else{

dojo.connect(dojo, "loaded", saveAndLoad);

}

function saveAndLoad(){

var name;

var age;

//sessionStorage

if (window.sessionStorage) {

name=window.sessionStorage.getItem("name");

age=window.sessionStorage.getItem("age");

if (name != "" || name != null){

document.getElementById("name").value=name;

}

if (age != "" || age != null){

document.getElementById("age").value=age;

}

}//dojox.storage

else

{

name=dojox.storage.get("name");

age=dojox.storage.get("age");

if (typeof name != "undefined" ){

document.getElementById("name").value=name;

}

if (typeof age != "undefined" ){

document.getElementById("age").value=age;

}

}

}

// 保存数据

function saveToStorage() {

varname=document.getElementById("name").value;

varage=document.getElementById("age").value;

//sessionStorage

if (window.sessionStorage) {

window.sessionStorage.setItem("name", name);

window.sessionStorage.setItem("age", age);

}//dojox.storage

else {

dojox.storage.put("name", name);

dojox.storage.put("age", age);

}

window.location.href="form2.html";

}

dojo.require("dojox.storage");

// 当退回到第一个页面时,从 Storage 中得到用户之前输入的值并显示在页面,方便修改

// 这里先进行 dojox.storage.manager 的初始化

if(!dojox.storage.manager.isInitialized()){

dojo.connect(dojox.storage.manager, "loaded", saveAndLoad);

} else{

dojo.connect(dojo, "loaded", saveAndLoad);

}

function saveAndLoad(){

var name;

var age;

//sessionStorage

if (window.sessionStorage) {

name = window.sessionStorage.getItem("name");

age = window.sessionStorage.getItem("age");

if (name != "" || name != null){

document.getElementById("name").value = name;

}

if (age != "" || age != null){

document.getElementById("age").value = age;

}

}//dojox.storage

else

{

name = dojox.storage.get("name");

age = dojox.storage.get("age");

if (typeof name != "undefined" ){

document.getElementById("name").value = name;

}

if (typeof age != "undefined" ){

document.getElementById("age").value = age;

}

}

}

// 保存数据

function saveToStorage() {

var name = document.getElementById("name").value;

var age = document.getElementById("age").value;

//sessionStorage

if (window.sessionStorage) {

window.sessionStorage.setItem("name", name);

window.sessionStorage.setItem("age", age);

}//dojox.storage

else {

dojox.storage.put("name", name);

dojox.storage.put("age", age);

}

window.location.href="form2.html";

}

清单 8. 经过修改后的第二个表单页面的部分代码

dojo.require("dojox.storage");

// 将保存在 sessionStorage 中的数据赋给表单的隐藏属性

function addStorageValue() {

var name;

var age;

//sessionStorage

if (window.sessionStorage) {

name=window.sessionStorage.getItem("name");

age=window.sessionStorage.getItem("age");

document.getElementById("name").value=name;

document.getElementById("age").value=age;

window.sessionStorage.removeItem("name");

window.sessionStorage.removeItem("age");

}//dojox.storage

else {

name=dojox.storage.get("name");

age=dojox.storage.get("age");

document.getElementById("name").value=name;

document.getElementById("age").value=age;

dojox.storage.remove("name");

dojox.storage.remove("age");

}

}

function backToPreviousForm() {

window.location.href="form1.html";

}

dojo.require("dojox.storage");

// 将保存在 sessionStorage 中的数据赋给表单的隐藏属性

function addStorageValue() {

var name;

var age;

//sessionStorage

if (window.sessionStorage) {

name = window.sessionStorage.getItem("name");

age = window.sessionStorage.getItem("age");

document.getElementById("name").value = name;

document.getElementById("age").value = age;

window.sessionStorage.removeItem("name");

window.sessionStorage.removeItem("age");

}//dojox.storage

else {

name = dojox.storage.get("name");

age = dojox.storage.get("age");

document.getElementById("name").value = name;

document.getElementById("age").value = age;

dojox.storage.remove("name");

dojox.storage.remove("age");

}

}

function backToPreviousForm() {

window.location.href = "form1.html";

}

结束语

HTML5 中引入了 DOM Storage 机制用于存储键值对,它的设计目的是提供大规模、易用的存储功能,并且程序员可以通过调用标准的接口,简单地访问存储的数据。目前,许多新版本的浏览器都支持 DOM Storage 功能。当老版本的浏览器不支持 HTML5 提供的 DOM Storage 机制时,可以考虑用 Dojo 来实现相同的功能。

【编辑推荐】

【责任编辑:陈贻新 TEL:(010)68476606】

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值