电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 浅谈 HTML5 的 DOM Storage 机制（1） [打印本页]

作者: look_w 时间: 2018-9-23 13:05 标题: 浅谈 HTML5 的 DOM Storage 机制（1）

HTML5 是下一代 HTML 标准，开始吸引越来越多人的目光。HTML5 的 DOM Storage 机制提供了一种方式让程序员能够把信息存储到本地的计算机上，在需要时获取。这点和 cookie 相似，区别是 DOM Storage 提供了更大容量的存储空间。
目前，在客户端保存数据使用最多的是 cookie，但 cookie 的大小上限为 4KB，并且每次请求一个新页面时 cookie 都会被发送过去。更多的存储空间需要浏览器本身或是插件的支持，例如只在 Internet Explorer 上使用的 userData，需要额外安装插件的 Google Gears 和 Flash。现在，HTML5 提供了一种标准的接口，使程序员可以简单地访问存储的数据。由于键值对存储在本地计算机上，在页面加载完毕后可以通过 JavaScript 来操作这些数据。
DOM Storage示例应用程序：用户注册本文使用的示例应用程序是一个简单的用户注册过程，表单包含三个字段：name、age 和 address，我们将其拆分为两个表单，分两个页面显示。借助简化了的数据模型，主要介绍如何利用 DOM Storage 功能处理表单跨页问题。
DOM Storage 两个分类DOM Storage 分为 sessionStorage 和 localStorage。
localStorage 对象和 sessionStorage 对象使用方法基本相同，它们的区别在于作用的范围不同。sessionStorage 用来存储与页面相关的数据，它在页面关闭后无法使用。而 localStorage 则持久存在，在页面关闭后也可以使用。
DOM Storage 接口下面是 DOM Storage 的接口定义：

1
2
3
4
5
6
7
8

interface Storage {
readonly attribute unsigned long length;
getter DOMString key(in unsigned long index);
getter any getItem(in DOMString key);
setter creator void setItem(in DOMString key, in any data);
deleter void removeItem(in DOMString key);
void clear();
};

length：返回当前存储在 Storage 对象中的键值对数量。
key(index)：返回列表中第 n 个键的名字。Index 从 0 开始。
getItem(key)：返回指定键对应的值。
setItem(key, value)：存入一个键值对。
removeItem(key) ：删除指定的键值对。
clear()：删除 Storage 对象中的所有键值对。
通常，使用最多的方法是 getItem 和 setItem。
以 sessionStorage 为例：
存储键值对：
window.sessionStorage.setItem(“key1”, value1);
通过键名来读取值：
var value1 = window.sessionStorage.getItem(“key1”);
判断浏览器是否支持 DOM Storage要使用 DOM Storage，首先，需要查看当前的浏览器是否支持。目前 Internet Explorer 8.0 以上，Firefox 3.5 以上，Chrome 4.0 以上都是支持 DOM Storage 的。
如果浏览器不支持 DOM Storage，可以用其他的方法作为备选，本文还使用 Dojo 提供的 dojox.storage 模块来实现相同的功能。
清单 1. 查看浏览器是否支持 DOM Storage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

//sessionStorage
if(window.sessionStorage){
alert(“support sessionStorage”);
}else{
alert(“not support sessionStorage”);
// 不支持 sessionStorage
// 用 dojox.storage 来实现相同功能
}

//localStorage
if(window.localStorage){
alert(“support localStorage”);
}else{
alert(“not support localStorage”);
// 不支持 localStorage
// 用 dojox.storage 来实现相同功能
}

下面是用户注册的两个表单。清单 2 中的第一个表单有两个字段 name 和 age 需要用户填写内容。填写完后点击 Next 按钮进入下一个页面，此时函数 saveToStorage 会被调用，把在该页面输入的两个字段的值保存到 sessionStorage 对象中。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)