2
2
3
3
Web 存储对象 ` localStorage ` 和 ` sessionStorage ` 允许你在浏览器上保存键值对。
4
4
5
- 有趣的是,数据在页面刷新 ( ` sessionStorage ` ) 甚至浏览器完全重启 ( ` localStorage ` ) 后仍然保留。我们很快会看到。
5
+ 有趣的是,数据在页面刷新( ` sessionStorage ` ) 甚至浏览器完全重启( ` localStorage ` ) 后仍然保留。我们很快会看到。
6
6
7
7
我们已经有了 ` cookies ` 。为什么还要额外的 web 存储对象?
8
8
9
- - 与 ` cookies ` 不同,web 存储对象不会随着每次请求发送到服务端。因此,我们可以保存更多数据。大部分浏览器允许保存至少 2M 字节的数据 ( 或者更多) ,并且是可配置的。
9
+ - 与 ` cookies ` 不同,web 存储对象不会随着每次请求发送到服务端。因此,我们可以保存更多数据。大部分浏览器允许保存至少 2M 字节的数据( 或者更多) ,并且是可配置的。
10
10
- 还有一点和 ` cookies ` 不同,服务端不能通过 HTTP 头部操作存储对象。一切都在 ` JavaScript ` 中完成。
11
- - 存储对象的来源绑定在 ` 域/协议/端口 三者之一 ` 下,也就是说,不同协议或者子域保存不同的存储对象,它们不能相互访问数据 。
11
+ - 存储对象的来源绑定在 ` 域/协议/端口 三者之一 ` 下,也就是说,不同协议或者子域保存不同的存储对象,它们之间不能相互访问数据 。
12
12
13
13
两个存储对象都提供相同的方法和属性:
14
14
@@ -19,15 +19,15 @@ Web 存储对象 `localStorage` 和 `sessionStorage` 允许你在浏览器上保
19
19
- ` key(index) ` -- 获取该索引下的键名。
20
20
- ` length ` -- 存储对象的长度。
21
21
22
- 正如你所看到的,它就像一个 ` Map ` 收集器 ( ` setItem/getItem/removeItem ` ) 。但是也保持着元素顺序,并且允许通过索引访问 ` key(index) ` 。
22
+ 正如你所看到的,它就像一个 ` Map ` 收集器( ` setItem/getItem/removeItem ` ) 。但是也保持着元素顺序,并且允许通过索引访问 ` key(index) ` 。
23
23
24
- 让我们看看它是如何工作的 。
24
+ 让我们看看它是如何工作的吧 。
25
25
26
26
## localStorage 示例
27
27
28
28
` localStorage ` 最主要的特点是:
29
29
30
- - 来自同一来源的数据在所有标签和窗口之间共享 。
30
+ - 来自同一来源的数据在所有浏览器标签页和窗口之间共享 。
31
31
- 数据不会过期。它在浏览器重启甚至系统重启后仍然保留。
32
32
33
33
例如,如果你运行此代码…
@@ -44,8 +44,7 @@ alert( localStorage.getItem('test') ); // 1
44
44
45
45
我们只要求数据存储在同一域/端口/协议上,` url ` 路径可以是不同的。
46
46
47
- ` localStorage ` 在相同来源下的所有窗口都是共享的。所以,如果我们在其中一个窗口设置了数据,在另外一个窗口中可以看到数据也发生了变化。
48
-
47
+ ` localStorage ` 在相同来源下的所有窗口都是共享的。所以,如果我们在其中一个窗口设置了数据,在另外一个窗口中可以看到数据也发生了变化。
49
48
50
49
## 类似对象形式访问
51
50
@@ -139,7 +138,7 @@ alert( user.name ); // John
139
138
为了调试的话,也可以将整个存储对象转为字符串。
140
139
141
140
``` js run
142
- // added formatting options to JSON.stringify to make the object look nicer
141
+ // 为 JSON.stringify 增加格式化参数,这样可以让对象看起来更美观
143
142
alert ( JSON .stringify (localStorage, null , 2 ) );
144
143
```
145
144
0 commit comments