小码哥的IT人生

Window sessionStorage 属性

JavaScript基础 2022-05-23 17:39:22小码哥的IT人生shichen

Window sessionStorage 属性

实例

创建一个 name="lastname" 和 value="Smith" 的 sessionStorage 名称/值对,然后检索 "lastname" 的值并将其插入到 id="result" 的元素中:

// 存储
sessionStorage.setItem("lastname", "Smith");
// 取回
document.getElementById("result").innerHTML = sessionStorage.getItem("lastname");

完整实例:

<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
// 检查浏览器支持
if (typeof(Storage) !== "undefined") {
  // 存储
  sessionStorage.setItem("lastname", "Smith");
  // 取回
  document.getElementById("result").innerHTML = sessionStorage.getItem("lastname");
} else {
  document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
</script>
</body>
</html>

运行结果:

Smith

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

页面下方有更多 TIY 实例。

定义和用法

localStorage 和 sessionStorage 属性允许在 Web 浏览器中保存键/值对。

sessionStorage 对象仅存储一个会话的数据(关闭浏览器选项卡时数据将被删除)。

提示:还请参阅 localStorage 属性,该属性存储没有到期日期的数据。浏览器关闭时数据不会被删除,并且会在第二天、一周或一年后可用。

浏览器支持

表中的数字指定了完全支持该属性的首个浏览器版本。

属性 Chrome IE Firefox Safari Opera
sessionStorage 4.0 8.0 3.5 4.0 11.5

语法

window.sessionStorage

向 sessionStorage 中保存数据的语法:

sessionStorage.setItem("key", "value");

从 sessionStorage 中读取数据的语法:

var lastname = sessionStorage.getItem("key");

从 sessionStorage 中删除数据的语法:

sessionStorage.removeItem("key");

从 sessionStorage 中删除所有已保存数据的语法:

sessionStorage.clear();

技术细节

返回值: Storage 对象

更多实例

示例代码:

下面的例子计算用户在当前会话中单击按钮的次数:

if (sessionStorage.clickcount) {
  sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
  sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";

完整实例:

<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
  if(typeof(Storage) !== "undefined") {
    if (sessionStorage.clickcount) {
      sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
    } else {
      sessionStorage.clickcount = 1;
    }
    document.getElementById("result").innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
  } else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
  }
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">点击我!</button></p>
<div id="result"></div>
<p>单击按钮来查看计数器增加。</p>
<p>关闭浏览器选项卡(或窗口),然后重试,计数器将被重置。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024