网络存储API


目录

    显示目录


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

例子

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
localStorage.setItem("name","John Doe");
document.getElementById("demo").innerHTML = localStorage.getItem("name");
</script>

</body>
</html>

所有浏览器都支持 Web Storage API:

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

本地存储对象

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

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

这些数据将持续数天、数周甚至数年。


setItem() 方法

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

它采用名称和值作为参数:

例子

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

getItem() 方法

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

它需要一个名称作为参数:

例子

localStorage.getItem("name");


会话存储对象

sessionStorage 对象与 localStorage 对象相同。

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

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

例子

sessionStorage.getItem("name");

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
sessionStorage.setItem("name","John Doe");
document.getElementById("demo").innerHTML = sessionStorage.getItem("name");
</script>

</body>
</html>

setItem() 方法

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

它采用名称和值作为参数:

例子

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

getItem() 方法

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

它需要一个名称作为参数:

例子

sessionStorage.getItem("name");

存储对象属性和方法

key(n)

返回存储中第n个键的名称

length

返回存储在Storage对象中的数据项的数量

getItem(keyname)

返回指定键名的值

setItem(keyname, value)

向存储添加密钥,或更新密钥值(如果已存在)

removeItem(keyname)

从存储中删除该密钥

clear()

清空存储中的所有密钥

Web 存储 API 的相关页面

window.localStorage

允许在网络浏览器中保存键/值对。存储数据无 截止日期

window.sessionStorage

允许在网络浏览器中保存键/值对。存储1个数据 会议