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
