JavaScript Web Storage API

Web Storage（存储）API是一种用于在浏览器中存储和检索数据的简单语法。它非常易于使用:

实例

<!DOCTYPE html>
<html>
<body>
<p id="demo">
<script>
localStorage.setItem("name","John Doe");
document.getElementById("demo").innerHTML = localStorage.getItem("name");
</script>
</body>
</html>

运行一下

所有浏览器都支持 Web 存储 API:


Chrome	IE/Edge	Firefox	Safari	Opera
Yes	Yes	Yes	Yes	Yes

localStorage 对象

localStorage 对象提供对特定网站的本地存储的访问。它让您可以存储、读取、添加、修改和删除该域的数据项。

数据存储时没有过期日期，并且在浏览器关闭时不会被删除。

数据将在几天、几周和几年内可用。

setItem() 方法

localStorage.setItem() 方法将数据项存储在 Storage 中。

它以名称和值作为参数:

实例

localStorage.setItem("name", "John Doe");

getItem() 方法

localStorage.getItem() 方法从 Storage 中检索数据项。

它以名称作为参数:

实例

localStorage.getItem("name");

sessionStorage 对象

sessionStorage 对象与 localStorage 对象相同。

区别在于 sessionStorage 对象存储一个会话的数据。

浏览器关闭时，数据将被删除。

实例

<!DOCTYPE html>
<html>
<body>
<p id="demo">
<script>
sessionStorage.setItem("name","John Doe");
document.getElementById("demo").innerHTML = sessionStorage.getItem("name");
</script>
</body>
</html>

运行一下

setItem() 方法

sessionStorage.setItem() 方法将数据项存储在 Storage 中。

它以名称和值作为参数:

实例

sessionStorage.setItem("name", "John Doe");

getItem() 方法

sessionStorage.getItem() 方法从 Storage 中检索数据项。

它以名称作为参数:

实例

sessionStorage.getItem("name");

Storage 对象属性和方法

属性/方法	描述
key(n)	返回 Storage 中第 n 个密钥的名称。
length	返回 Storage 对象中存储的数据项数
getItem(keyname)	返回指定键名的值
setItem(keyname, value)	将该密钥添加到 storage 中，或者更新该密钥的值（如果该密钥已存在）
removeItem(keyname)	从 storage 中移除该值
clear()	清空 storage 中的所有键值

Web Storage API 的相关页面

属性	描述
window.localStorage	允许在 web 浏览器中保存键/值对。存储的数据没有过期日期。
window.sessionStorage	允许在 web 浏览器中保存键/值对。存储一个会话的数据

JavaScript Web Storage API

实例

localStorage 对象

setItem() 方法

实例

getItem() 方法

实例

sessionStorage 对象

实例

setItem() 方法

实例

getItem() 方法

实例

Storage 对象属性和方法

Web Storage API 的相关页面

分类导航