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