Web Storage API
JavaScript基础 2022-04-25 01:52:44小码哥的IT人生shichen
Web Storage API
Web Storage API 是一种用于在浏览器中存储和检索数据的简单语法。他非常容易使用：
示例代码：
localStorage.setItem("name", "Bill Gates");
localStorage.getItem("name");
完整实例：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
localStorage.setItem("name","Bill Gates");
document.getElementById("demo").innerHTML = localStorage.getItem("name");
</script>
</body>
</html>
运行结果：
Bill Gates
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
所有浏览器都支持 Web Storage API：
| Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | IE/Edge | Firefox | Safari | Opera |
| 支持 | 支持 | 支持 | 支持 | 支持 |
localStorage 对象
localStorage 对象提供对特定网站的本地存储的访问。它允许您存储、读取、添加、修改和删除该域的数据项。
存储的数据没有到期日期，并且在浏览器关闭时不会被删除。
这些数据将在几天、几周和几年内均可用。
setItem() 方法
localStorage.setItem() 方法将数据项存储在 storage 中。
它接受一个名称和一个值作为参数：
示例代码：
localStorage.setItem("name", "Bill Gates");getItem() 方法
localStorage.getItem() 方法从存储（storage）中检索数据项。
它接受一个名称作为参数：
示例代码：
localStorage.getItem("name");sessionStorage 对象
sessionStorage 对象与 localStorage 对象相同。
不同之处在于 sessionStorage 对象存储会话的数据。
当浏览器关闭时，数据会被删除。
示例代码：
sessionStorage.getItem("name");
完整实例：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
sessionStorage.setItem("name","Bill Gates");
document.getElementById("demo").innerHTML = sessionStorage.getItem("name");
</script>
</body>
</html>
运行结果：
Bill Gates
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
setItem() 方法
sessionStorage.setItem() 方法将数据项存储在存储（storage）中。
它接受一个名称和一个值作为参数：
示例代码：
sessionStorage.setItem("name", "Bill Gates");getItem() 方法
sessionStorage.getItem() 方法从存储（storage）中检索数据项。
它接受一个名称作为参数：
示例代码：
sessionStorage.getItem("name");Storage 对象属性和方法
| 属性/方法 | 描述 |
|---|---|
| key(n) | 返回存储中第 n 个键的名称。 |
| length | 返回存储在 Storage 对象中的数据项数。 |
| getItem(keyname) | 返回指定的键名的值。 |
| setItem(keyname, value) | 将键添加到存储中，或者如果键已经存在，则更新该键的值。 |
| removeItem(keyname) | 从存储中删除该键。 |
| clear() | 清空所有键。 |
Web Storage API 相关页面
| 属性 | 描述 |
|---|---|
| window.localStorage | 允许在 Web 浏览器中保存键/值对。存储没有到期日期的数据。 |
| window.sessionStorage | 允许在 Web 浏览器中保存键/值对。存储一个会话的数据。 |
