浅谈 HTML5 的 DOM Storage 机制（3）
|
- UID
- 1066743
|
浅谈 HTML5 的 DOM Storage 机制（3）
使用 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 的复杂数据进行处理1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| // 生成一个 Boolean 类型的变量 data1
var data1 = new Boolean(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 类型的变量
var data2 = new String("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 工具栏 综上所述，我们可以如清单 5 一样，在加载页面的时候用 JSON 转换数据类型，在离开页面的时候将数据保存为 JSON 对象。这样，保存在 Storage 中任何类型的数据在读取的时候都可以转换为原来的类型。
清单 5. 使用 JSON 对 DOM Storage 的复杂数据进行处理1
2
3
4
5
6
7
8
9
10
11
12
| <script type="text/javascript">
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);
</script>
|
|
|
|
|
|
|
