Window localStorage 属性
JavaScript基础 2022-05-23 17:36:44小码哥的IT人生shichen
Window localStorage 属性
实例
创建一个 name="lastname" 和 value="Smith" 的 localStorage 名称/值对，然后检索 "lastname" 的值并将其插入到 id="result" 的元素中：
// 存储
localStorage.setItem("lastname", "Smith");
// 取回
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
完整实例：
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
// 检查浏览器支持
if (typeof(Storage) !== "undefined") {
// 存储
localStorage.setItem("lastname", "Smith");
// 取回
document.getElementById("result").innerHTML = localStorage.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 浏览器中保存键/值对。
localStorage 对象存储没有到期日期的数据。浏览器关闭时数据不会被删除，并且会在第二天、周或一年后可用。
localStorage 属性是只读的。
提示：还请参阅 sessionStorage 属性，该属性存储一个会话的数据（关闭浏览器选项卡时数据会丢失）。
浏览器支持
表中的数字指定了完全支持该属性的首个浏览器版本。
| 属性 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| localStorage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
语法
window.localStorage
向 localStorage 保存数据的语法：
localStorage.setItem("key", "value");
从 localStorage 读取数据的语法：
var lastname = localStorage.getItem("key");
从 localStorage 删除数据的语法：
localStorage.removeItem("key");技术细节
| 返回值： | Storage 对象 |
|---|
更多实例
示例代码：
下面的例子计算用户单击按钮的次数：
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
localStorage.clickcount + " time(s).";
完整实例：
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount)+1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s).";
} 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
