blob: 2e57e01de32e5bdab61ff6ce4c45961747c1683f (
plain)
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
---
title: Web Storage API
slug: Web/API/Web_Storage_API
tags:
- API
- Storage
- Web Storage
- Web Storage API
- localStorage
- sessionStorage
translation_of: Web/API/Web_Storage_API
---
<p>{{DefaultAPISidebar("Web Storage API")}}</p>
<p> <strong>Web Storage API </strong>提供机制， 使浏览器能以一种比使用Cookie更直观的方式存储键/值对。</p>
<h2 id="Web_Storage_概念和用法">Web Storage 概念和用法</h2>
<p>Web Storage 包含如下两种机制：</p>
<ul>
<li><code>sessionStorage</code> 为每一个给定的源（given origin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。</li>
<li><code>localStorage</code> 同样的功能，但是在浏览器关闭，然后重新打开后数据仍然存在。</li>
</ul>
<p>这两种机制是通过 {{domxref("Window.sessionStorage")}} 和 {{domxref("Window.localStorage")}} 属性使用（更确切的说，在支持的浏览器中 <code>Window</code> 对象实现了 <code>WindowLocalStorage</code> 和 <code>WindowSessionStorage</code> 对象并挂在其 <code>localStorage</code> 和 <code>sessionStorage</code> 属性下）—— 调用其中任一对象会创建 {{domxref("Storage")}} 对象，通过 {{domxref("Storage")}} 对象，可以设置、获取和移除数据项。对于每个源（origin）<code>sessionStorage</code> 和 <code>localStorage</code> 使用不同的 Storage 对象——独立运行和控制。</p>
<div class="note">
<p><span style="font-size: 14px; line-height: 21px;"><strong>注意：</strong></span>从Firefox 45开始，当浏览器崩溃或重启时，每个源的存储大小将限制在10M，以避免因过度使用web storage引起的内存问题。</p>
</div>
<div class="note">
<p><strong>注意：</strong>若用户<a href="https://support.mozilla.org/en-US/kb/disable-third-party-cookies">禁用第三方cookie</a>，那么将不允许来自第三方IFrames对Web Storage的访问。（从<a href="https://developer.mozilla.org/en-US/Firefox/Releases/43">Firefox 43</a>版本开始实行）</p>
</div>
<div class="note">
<p><strong>注意：</strong>本地存储不同于mozStorage（Mozilla's XPCOM interfaces to SQLite）或<a href="/en-US/docs/Session_store_API" title="Session_store_API">Session store API</a>（an <a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a> storage utility for use by extensions）。</p>
</div>
<h2 id="Web_Storage_接口">Web Storage 接口</h2>
<dl>
<dt>{{domxref("Storage")}}</dt>
<dd>允许你在一个特定域中设置，检索和删除数据和储存类型(session or local.)</dd>
<dt>{{domxref("Window")}}</dt>
<dd>Web Storage API 继承于{{domxref("Window")}} 对象,并提供两个新属性 — {{domxref("Window.sessionStorage")}} 和 {{domxref("Window.localStorage")}} — 它们分别地提供对当前域的会话和本地{{domxref("Storage")}} 对象的访问。</dd>
<dt>{{domxref("StorageEvent")}}</dt>
<dd> 当一个存储区更改时，存储事件从文档的 <code>Window</code> 对象上被发布。</dd>
</dl>
<h2 id="例子">例子</h2>
<p>为了阐述一些 典型的web storage的用法, 我们创了一个简单的例子, <label>想象上地称为</label> <a href="https://github.com/mdn/dom-examples/tree/master/web-storage">Web Storage Demo</a>. <a href="https://mdn.github.io/dom-examples/web-storage/">landing page</a> 提供控制器可以用来自定义颜色，字体和装饰图片。 当你选择不同的选项, 页面会被立即更新;此外,你的选择被储存到 localStorage 中, 以便当你离开该页面，然后过些时候在重新加载它时，你的选择会被记住。</p>
<p>另外, 我们提供了一个 <a href="https://mdn.github.io/dom-examples/web-storage/event.html">event output page</a> — 如果你在另一个标签页加载这个页面, 然后在landing page改变你的选择，当{{event("StorageEvent")}}被发布时，你将会看到被更新的储存信息输出。</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Web Storage')}}</td>
<td>{{Spec2('Web Storage')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<h3 id="Window.localStorage"><code>Window.localStorage</code></h3>
<p>{{Compat("api.Window.localStorage")}}</p>
<h3 id="Window.sessionStorage"><code>Window.sessionStorage</code></h3>
<p>{{Compat("api.Window.sessionStorage")}}</p>
<p><span>不同的浏览器对localStorage和sessionStorage有不同的容量限制。</span><a href="http://dev-test.nemikor.com/web-storage/support-test/">点此查看各版本浏览器对存储容量的描述详情</a></p>
<div id="compat-mobile"></div>
<div class="note">
<p><strong>注意：</strong>手机Safari从iOS 5.1版本开始，将localStorage数据到存放到缓存文件夹中，当空间不足时，系统将会时不时地自动清理缓存。</p>
</div>
<h2 id="隐私浏览_隐身模式">隐私浏览/ 隐身模式</h2>
<p>大多数现代浏览器支持称为 'Incognito' 的用户隐私选择, “隐私浏览” 或类似的功能可以不像历史记录和cookie那样存储数据。 这明显与 Web Storage 不兼容。因此，浏览器厂商正尝试不同的方式来处理不兼容问题。</p>
<p>多数浏览器可以选择一种策略使存储的API可以使用并且不受限制，最大的不同是存储的数据在浏览器关闭后被清除。这些浏览器对如何处理已经存在的数据（从定期的session中获取到的），仍旧持有不同解释。在隐私模式还应该可读吗？然后就有一些浏览器，尤其是Safari，提供了可选的解决方式：存储可用，但是给其分配0字节的存储空间，有效的使其不能被写入数据。</p>
<p>开发者需明确不同的实现，并在用 Web Storage API 开发网站时考虑这些实现的差别。更多信息请查看 <a href="https://blog.whatwg.org/tag/localstorage">this WHATWG blog post</a> ，这里有更详细的讨论。</p>
<h2 id="参见"><strong>参见</strong></h2>
<ul>
<li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Web Storage API的使用</a></li>
<li><a href="https://medium.com/@ramsunvtech/onfocus-html5-storage-apis-b45d92aa424b">HTML5 Storage API By Venkatraman</a></li>
</ul>
|
