参考手册
Storage 对象
Storage getItem() 方法
Storage removeItem() 方法
返回 Storage 对象

Storage setItem() 方法

实例

设置指定的本地存储项的值:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>此示例演示如何使用 setItem() 方法设置指定本地存储项的值。</p>
  7. <button onclick="createItem()">设置本地存储项</button>
  9. <h2>获取值</h2>
  11. <p>单击按钮以获取项目值:</p>
  13. <button onclick="readValue()">获取项目值</button>
  15. <p id="demo">
  17. <script>
  19. function createItem() {
  20.   localStorage.setItem("mytime", Date.now());
  21. }
  23. function readValue() {
  24.   var x = localStorage.getItem("mytime");
  25.   document.getElementById("demo").innerHTML = x;
  26. }
  28. </script>
  29. </body>
  30. </html>
运行一下

定义与用法

setItem() 方法设置指定存储对象项的值。

setItem() 方法属于存储对象，它可以是 localStorage 对象或 sessionStorrage 对象。

浏览器支持

方法
setItem()483.5410.5

语法

  1.     localStorage.setItem(keyname, value)

或者:

  1.     sessionStorage.setItem(keyname, value)

参数值

参数描述
keyname必填。指定要设置值的键的名称的字符串 of
value必填。指定要设置其值的键的值的字符串

技术细节

DOM 版本:Web Storage API
返回值:一个字符串，表示插入的值

更多实例

实例

相同的示例，但使用 sessionStorage 会话存储而不是本地存储。

设置指定会话存储项的值:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>此示例演示如何使用 setItem() 方法设置指定本地存储项的值。</p>
  7. <button onclick="createItem()">设置本地存储项</button>
  9. <h2>获取值</h2>
  11. <p>单击按钮以获取项目值:</p>
  13. <button onclick="readValue()">获取项目值</button>
  15. <p id="demo">
  17. <script>
  19. function createItem() {
  20.   sessionStorage.setItem("test1", "Lorem ipsum");
  21. }
  23. function readValue() {
  24.   var x = sessionStorage.getItem("test1");
  25.   document.getElementById("demo").innerHTML = x;
  26. }
  28. </script>
  29. </body>
  30. </html>
运行一下
实例

也可以使用点符号（obj.key）设置该值:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <button onclick="createItem()">创建会话存储项</button>
  7. <h2>获取名为 "test1" 的会话存储项的值</h2>
  9. <p>点击按钮获取项目值:</p>
  11. <button onclick="myFunction()">获取值</button>
  13. <p id="demo">
  15. <script>
  17. function createItem() {
  18.   sessionStorage.test1 = "hello";
  19. }
  21. function myFunction() {
  22.   var x = sessionStorage.test1;
  23.   document.getElementById("demo").innerHTML = x;
  24. }
  26. </script>
  27. </body>
  28. </html>
运行一下
实例

您也可以这样获取值:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  6. <button onclick="createItem()">创建会话存储项</button>
  8. <h2>获取名为 "test1" 的会话存储项的值</h2>
  10. <p>点击按钮获取项目值:</p>
  12. <button onclick="myFunction()">获取值</button>
  14. <p id="demo">
  16. <script>
  18. function createItem() {
  19.   sessionStorage.test1 = "hello";
  20. }
  22. function myFunction() {
  23.   var x = sessionStorage["test1"];
  24.   document.getElementById("demo").innerHTML = x;
  25. }
  27. </script>
  28. </body>
  29. </html>
运行一下

关联页面

Web Storage 引用: getItem() 方法

Web Storage 引用: removeItem() 方法

Storage getItem() 方法
Storage removeItem() 方法

分类导航