From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/storage/clear/index.html | 121 ++++++++++++++++++ files/zh-cn/web/api/storage/getitem/index.html | 131 ++++++++++++++++++++ files/zh-cn/web/api/storage/index.html | 108 +++++++++++++++++ files/zh-cn/web/api/storage/key/index.html | 124 +++++++++++++++++++ files/zh-cn/web/api/storage/length/index.html | 117 ++++++++++++++++++ .../zh-cn/web/api/storage/localstorage/index.html | 135 +++++++++++++++++++++ files/zh-cn/web/api/storage/removeitem/index.html | 124 +++++++++++++++++++ files/zh-cn/web/api/storage/setitem/index.html | 72 +++++++++++ 8 files changed, 932 insertions(+) create mode 100644 files/zh-cn/web/api/storage/clear/index.html create mode 100644 files/zh-cn/web/api/storage/getitem/index.html create mode 100644 files/zh-cn/web/api/storage/index.html create mode 100644 files/zh-cn/web/api/storage/key/index.html create mode 100644 files/zh-cn/web/api/storage/length/index.html create mode 100644 files/zh-cn/web/api/storage/localstorage/index.html create mode 100644 files/zh-cn/web/api/storage/removeitem/index.html create mode 100644 files/zh-cn/web/api/storage/setitem/index.html (limited to 'files/zh-cn/web/api/storage') diff --git a/files/zh-cn/web/api/storage/clear/index.html b/files/zh-cn/web/api/storage/clear/index.html new file mode 100644 index 0000000000..02eab09559 --- /dev/null +++ b/files/zh-cn/web/api/storage/clear/index.html @@ -0,0 +1,121 @@ +--- +title: Storage.clear() +slug: Web/API/Storage/clear +translation_of: Web/API/Storage/clear +--- +

{{APIRef("Web Storage API")}}

+ +

clear() 是 {{domxref("Storage")}} 接口的一个方法，调用它可以清空存储对象里所有的键值。

+ +

语法

+ +
storage.clear();
+ +

参数

+ +

无。

+ +

返回值

+ +

无。

+ +

示例

+ +

下面的函数在本地存储里面创建三个数据项，然后使用 clear() 把它们全部移除。

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+
+  localStorage.clear();
+}
+ +
+

备注：一个实际的例子 Web Storage Demo。

+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Storage', '#dom-storage-clear', 'clear()')}}{{Spec2('Web Storage')}} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

各浏览器支持的 localStorage 和 sessionStorage 容量不同。测试页面：detailed rundown of all the storage capacities for various browsers.

+ +
+

Note: since iOS 5.1, Safari Mobile stores localStorage data in the cache folder, which is subject to occasional clean up, at the behest of the OS, typically if space is short.

+
+ +

相关链接

+ +

使用 Web Storage API

diff --git a/files/zh-cn/web/api/storage/getitem/index.html b/files/zh-cn/web/api/storage/getitem/index.html new file mode 100644 index 0000000000..11869d49e2 --- /dev/null +++ b/files/zh-cn/web/api/storage/getitem/index.html @@ -0,0 +1,131 @@ +--- +title: Storage.getItem() +slug: Web/API/Storage/getItem +translation_of: Web/API/Storage/getItem +--- +

{{APIRef("Web Storage API")}}

+ +

getItem() 作为 {{domxref("Storage")}} 接口的方法，接受一个键名（key name）作为参数，并返回对应键名的值（key's value）。

+ +

语法

+ +
var aValue = storage.getItem(keyName);
+
+ +

参数

+ +
+
keyName
+
一个包含键名的 {{domxref("DOMString")}}。
+
+ +

返回值

+ +

一个 {{domxref("DOMString")}}，键名对应的值。如果键名不存在于存储中，则返回 null。

+ +

示例

+ +

下面的函数从本地存储中获取三个数据项，然后使用他们在页面上设置自定义样式：

+ +
function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}
+ +
+

备注：一个实际的例子 Web Storage Demo。

+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Storage', '#dom-storage-getitem', 'getItem()')}}{{Spec2('Web Storage')}} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

各浏览器支持的 localStorage 和 sessionStorage 容量不同。测试页面：detailed rundown of all the storage capacities for various browsers。

+ +
+

Note: since iOS 5.1, Safari Mobile stores localStorage data in the cache folder, which is subject to occasional clean up, at the behest of the OS, typically if space is short.

+
+ +

相关链接

+ +

使用 Web Storage API

diff --git a/files/zh-cn/web/api/storage/index.html b/files/zh-cn/web/api/storage/index.html new file mode 100644 index 0000000000..d31bd6b056 --- /dev/null +++ b/files/zh-cn/web/api/storage/index.html @@ -0,0 +1,108 @@ +--- +title: Storage +slug: Web/API/Storage +tags: + - API + - Interface + - Reference + - Storage + - Web Storage + - data +translation_of: Web/API/Storage +--- +

{{APIRef("Web Storage API")}}

+ +

作为 Web Storage API 的接口，Storage 提供了访问特定域名下的会话存储或本地存储的功能，例如，可以添加、修改或删除存储的数据项。

+ +

如果你想要操作一个域名的会话存储，可以使用 {{domxref("Window.sessionStorage")}}；如果想要操作一个域名的本地存储，可以使用 {{domxref("Window.localStorage")}}。

+ +

属性

+ +
+
{{domxref("Storage.length")}} {{readonlyInline}}
+
返回一个整数，表示存储在 Storage 对象中的数据项数量。
+
+ +

方法

+ +
+
{{domxref("Storage.key()")}}
+
该方法接受一个数值 n 作为参数，并返回存储中的第 n 个键名。
+
+ +
+
{{domxref("Storage.getItem()")}}
+
该方法接受一个键名作为参数，返回键名对应的值。
+
{{domxref("Storage.setItem()")}}
+
该方法接受一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值。
+
{{domxref("Storage.removeItem()")}}
+
该方法接受一个键名作为参数，并把该键名从存储中删除。
+
{{domxref("Storage.clear()")}}
+
调用该方法会清空存储中的所有键名。
+
+ +

示例

+ +

这里我们通过调用 localStorage 来访问一个 Storage 对象。首先，使用 !localStorage.getItem('bgcolor') 测试本地存储中是否包含该数据项。如果包含，则运行 setStyles() 函数，该函数使用 localStorage.getItem() 来获取数据项，并使用这些值更新页面样式。如果不包含，我们运行另一个函数 populateStorage()，该函数使用 localStorage.setItem() 设置数据项，然后运行 setStyles()。

+ +
if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+} else {
+  setStyles();
+}
+
+function populateStorage() {
+  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+  localStorage.setItem('font', document.getElementById('font').value);
+  localStorage.setItem('image', document.getElementById('image').value);
+
+  setStyles();
+}
+
+function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}
+ +
+

备注：要运行完整的例子，可查看 Web Storage Demo。

+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Storage', '#the-storage-interface', 'Storage')}}{{Spec2('Web Storage')}} 
+ +

浏览器兼容性

+ +

{{Compat("api.Storage")}}

+ +

相关链接

+ + diff --git a/files/zh-cn/web/api/storage/key/index.html b/files/zh-cn/web/api/storage/key/index.html new file mode 100644 index 0000000000..bfd14f5c44 --- /dev/null +++ b/files/zh-cn/web/api/storage/key/index.html @@ -0,0 +1,124 @@ +--- +title: Storage.key() +slug: Web/API/Storage/key +translation_of: Web/API/Storage/key +--- +

{{APIRef()}}

+ +

key() 作为 {{domxref("Storage")}} 接口的方法，接受一个数值 n 作为参数，返回存储对象第 n 个数据项的键名。键的存储顺序是由用户代理定义的，所以尽可能不要依赖这个方法。

+ +

语法

+ +
var aKeyName = storage.key(key);
+ +

参数

+ +
+
key
+
一个整数，表示要获取的键名索引。
+
+ +

返回值

+ +

一个包含键名的 {{domxref("DOMString")}}。

+ +

示例

+ +

下面的函数添加三个数据项到当前域名的本地存储里，然后返回第三个的键名：

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'yellow');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'cats.png');
+
+  localStorage.key(2); // 应该返回 'image'
+}
+ +
+

备注： 关于实际的例子，可以查看 Web Storage Demo.

+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Storage', '#dom-storage-key', 'key()')}}{{Spec2('Web Storage')}}
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

各浏览器支持的 localStorage 和 sessionStorage 容量不同。测试页面：detailed rundown of all the storage capacities for various browsers.

+ +
+

Note: since iOS 5.1, Safari Mobile stores localStorage data in the cache folder, which is subject to occasional clean up, at the behest of the OS, typically if space is short.

+
+ +

相关链接

+ +

使用 Web Storage API

diff --git a/files/zh-cn/web/api/storage/length/index.html b/files/zh-cn/web/api/storage/length/index.html new file mode 100644 index 0000000000..5c4d79d3d3 --- /dev/null +++ b/files/zh-cn/web/api/storage/length/index.html @@ -0,0 +1,117 @@ +--- +title: Storage.length +slug: Web/API/Storage/length +translation_of: Web/API/Storage/length +--- +

{{APIRef("Web Storage API")}}

+ +

length 是 {{domxref("Storage")}} 接口的只读属性，返回一个整数，表示存储在 Storage 对象里的数据项（data items）数量。

+ +

语法

+ +
var aLength = storage.length;
+ +

返回值

+ +

一个整数。

+ +

示例

+ +

下面的函数添加三个数据项到当前域名的本地存储里面，然后返回本地存储里面数据项的数量：

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'yellow');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'cats.png');
+
+  localStorage.length; // 返回 3
+}
+ +
+

备注： 关于实际的例子，可以查看 Web Storage Demo.

+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Storage', '#dom-storage-length', 'length')}}{{Spec2('Web Storage')}} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

各浏览器支持的 localStorage 和 sessionStorage 容量不同。测试页面：detailed rundown of all the storage capacities for various browsers.

+ +
+

Note: since iOS 5.1, Safari Mobile stores localStorage data in the cache folder, which is subject to occasional clean up, at the behest of the OS, typically if space is short.

+
+ +

相关链接

+ +

使用 Web Storage API

diff --git a/files/zh-cn/web/api/storage/localstorage/index.html b/files/zh-cn/web/api/storage/localstorage/index.html new file mode 100644 index 0000000000..5d655432b9 --- /dev/null +++ b/files/zh-cn/web/api/storage/localstorage/index.html @@ -0,0 +1,135 @@ +--- +title: LocalStorage +slug: Web/API/Storage/LocalStorage +tags: + - 存储API + - 离线 +translation_of: Web/API/Window/localStorage +--- +

localStorage 与 sessionStorage 一样，都遵循同源策略，但是它是持续存在的。localStorage 首次出现于 Firefox 3.5。

+ +
Note: 当浏览器进入隐私浏览模式，会创建一个新的、临时的数据库来存储local storage的数据；当关闭隐私浏览模式时，该数据库将被清空并丢弃。
+ +
// Save data to the current local store
+localStorage.setItem("username", "John");
+
+// Access some stored data
+alert( "username = " + localStorage.getItem("username"));
+ +

本地存储（localStorage）的持续存在对许多事情都有帮助，包括这个示例this tutorial on Codepen所演示的记录页面查看次数。

+ +

兼容性

+ +

Storage 对象最近才加入标准，因此可能并不被所有浏览器支持。你可以通过在你的scripts代码前加入以下两段代码中某一段来规避在不能原生支持的执行环境使用localStorage对象的问题。

+ +

该算法借助于cookies，对localStorage对象进行了严谨的实现。

+ +
if (!window.localStorage) {
+  Object.defineProperty(window, "localStorage", new (function () {
+    var aKeys = [], oStorage = {};
+    Object.defineProperty(oStorage, "getItem", {
+      value: function (sKey) { return sKey ? this[sKey] : null; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "key", {
+      value: function (nKeyId) { return aKeys[nKeyId]; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "setItem", {
+      value: function (sKey, sValue) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "length", {
+      get: function () { return aKeys.length; },
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "removeItem", {
+      value: function (sKey) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    this.get = function () {
+      var iThisIndx;
+      for (var sKey in oStorage) {
+        iThisIndx = aKeys.indexOf(sKey);
+        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
+        else { aKeys.splice(iThisIndx, 1); }
+        delete oStorage[sKey];
+      }
+      for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
+      for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) {
+        aCouple = aCouples[nIdx].split(/\s*=\s*/);
+        if (aCouple.length > 1) {
+          oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
+          aKeys.push(iKey);
+        }
+      }
+      return oStorage;
+    };
+    this.configurable = false;
+    this.enumerable = true;
+  })());
+}
+
+ +
注意：数据的最大大小是通过cookies来严格限制的。可以使用这样的算法实现，使用localStorage.setItem()和localStorage.removeItem()这两个函数进行添加、改变或删除一个键。使用方法为localStorage.yourKey = yourValue;和delete localStorage.yourKey;进行设置和删除一个键并不是安全的做法。您也可以改变它的名字和使用它仅仅去管理文档的cookies而不管localStorage 这个对象。
+ +
注意：通过将字符串"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/" 改成"; path=/"（并且改变对象的名字），可以使得这个 localStorage的实现变为sessionStorage的实现。然而，这种实现方式会使储存键值可以跨标签和窗口访问（而且只会在浏览器窗口被关闭时销毁），完全兼容的sessionStorage实现会将储存键值访问权限限定在当前浏览上下文。
+ +

下面是另一个，并不那么严谨的localStorage对象的实现。相比上一个方法，它更简单且能与旧的浏览器良好兼容，如Internet Explorer < 8 (甚至能在 Internet Explorer 6 上正常工作)。它同样是使用cookies来实现的。

+ +
if (!window.localStorage) {
+  window.localStorage = {
+    getItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
+      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
+    },
+    key: function (nKeyId) {
+      return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
+    },
+    setItem: function (sKey, sValue) {
+      if(!sKey) { return; }
+      document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+      this.length = document.cookie.match(/\=/g).length;
+    },
+    length: 0,
+    removeItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
+      document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      this.length--;
+    },
+    hasOwnProperty: function (sKey) {
+      return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
+    }
+  };
+  window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
+}
+
+ +
注意：数据量的最大值是通过cookies来严格限制的。可以使用localStorage.getItem(), localStorage.setItem()和localStorage.removeItem()等方法获取、设置或删除一个键。使用方法localStorage.yourKey = yourValue;获取、添加、改变或者删除一个键并不是安全的做法。您也可以改变它的名字和使用它仅仅去管理文档的cookies而不管localStorage 这个对象。
+ +
注意：通过将字符串"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/" 改成"; path=/"（并且改变对象的名字），可以使得这个 localStorage的实现变为sessionStorage的实现。然而，这种实现方式会使储存键值可以跨标签和窗口访问（而且只会在浏览器窗口被关闭时销毁），完全兼容的sessionStorage实现会将储存键值限定在当前浏览环境上下文。
+ +

与globalStorage的兼容性及关系

+ +

localStorage 和 globalStorage[location.hostname] 是一样的, 除了作用域是在 HTML5 origin (结构 + 主机名 + 非标准的端口)， 并且 localStorage 是一个 Storage 实例 ，而globalStorage[location.hostname] 是一个 StorageObsolete 实例，下面将要讨论这个。 例如, http://example.com 无法访问与 https://example.com 相同的 localStorage 对象 ，但是它们可以访问同一个 globalStorage. localStorage 是标准的接口，globalStorage 不是， 所以不要依赖于 globalStorage 。   

+ +

请注意，给globalStorage[location.hostname]设置一个属性并不会影响到localStorage。拓展Storage.prototype也不会影响globalStorage对象，只有拓展StorageObsolete.prototype才会影响。

+ +

存储格式

+ +

Storage的键和值都是以每个字符占2个字节的UTF-16字符串(DOMString)格式存储的。

diff --git a/files/zh-cn/web/api/storage/removeitem/index.html b/files/zh-cn/web/api/storage/removeitem/index.html new file mode 100644 index 0000000000..462f3cf703 --- /dev/null +++ b/files/zh-cn/web/api/storage/removeitem/index.html @@ -0,0 +1,124 @@ +--- +title: Storage.removeItem() +slug: Web/API/Storage/removeItem +translation_of: Web/API/Storage/removeItem +--- +

{{APIRef("Web Storage API")}}

+ +

{{domxref("Storage")}} 接口的 removeItem() 方法，接受一个键名作为参数，会从给定的Storage对象中删除该键名（如果存在）。 如果没有与该给定键名匹配的项，则此方法将不执行任何操作。

+ +

语法

+ +
storage.removeItem(keyName);
+ +

参数

+ +
+
keyName
+
一个 {{domxref("DOMString")}}，即你想要移除的键名。
+
+ +

返回值

+ +

无。

+ +

示例

+ +

下面的函数在本地存储里面创建三个数据项，然后把 image 数据项移除。

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+
+  localStorage.removeItem('image');
+}
+ +
+

备注：完整的例子，可查看 Web Storage Demo。

+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Storage', '#dom-storage-removeitem', 'removeItem()')}}{{Spec2('Web Storage')}} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

各浏览器支持的 localStorage 和 sessionStorage 大小上限不同。测试页面 detailed rundown of all the storage capacities for various browsers。

+ +
+

Note: since iOS 5.1, Safari Mobile stores localStorage data in the cache folder, which is subject to occasional clean up, at the behest of the OS, typically if space is short.

+
+ +

相关链接

+ +

使用 Web Storage API

diff --git a/files/zh-cn/web/api/storage/setitem/index.html b/files/zh-cn/web/api/storage/setitem/index.html new file mode 100644 index 0000000000..14cf70c89a --- /dev/null +++ b/files/zh-cn/web/api/storage/setitem/index.html @@ -0,0 +1,72 @@ +--- +title: Storage.setItem() +slug: Web/API/Storage/setItem +tags: + - API + - Storage + - Web Storage +translation_of: Web/API/Storage/setItem +--- +

{{APIRef("Web Storage API")}}

+ +

setItem() 作为 {{domxref("Storage")}} 接口的方法，接受一个键名和值作为参数，将会把键名添加到存储中，如果键名已存在，则更新其对应的值。

+ +

语法

+ +
storage.setItem(keyName, keyValue);
+ +

参数

+ +
+
keyName
+
一个 {{domxref("DOMString")}}，要创建或更新的键名。
+
keyValue
+
一个 {{domxref("DOMString")}}，要创建或更新的键名对应的值。
+
+ +

返回值

+ +

{{jsxref("undefined")}}

+ +

示例

+ +

下面的函数在本地存储中创建三个数据项。

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+}
+ +
+

备注：一个实际的例子 Web Storage Demo。

+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Storage', '#dom-storage-setitem', 'setItem()')}}{{Spec2('Web Storage')}}
+ +

浏览器兼容性

+ +

{{Compat("api.Storage.setItem")}}

+ +

参见

+ + -- cgit v1.2.3-54-g00ecf