有时我们希望能在浏览器中存储一些数据, 而 Web Storage API 提供了 localStoragesessionStorage 两个对象来存储数据。

两者有以下不同点:

localStorage sessionStorage
作用范围 同域名。 当前会话。
有效期 浏览器重启后数据仍然保留。 刷新页面保留,关闭标签页后消失。

$$warning

storage 在使用上与字典略微相似,需要注意的是 storage 只能存储字符串类型的值。

$$

storage 的属性和方法如下:

属性或方法 描述
length 存储的数据数量。
key(index) 接受一个数值 n 作为参数,并返回存储中的第 n 个键名。
getItem(key) 接受一个键名作为参数,返回键名对应的值。
setItem(key, value) 设置键对应的值。
removeItem(key) 删除对应的键与值。
clear() 清空所有数据。

$$tip

由于 localStorage 使用的场景最多,因此以下示例都只是介绍 localStorage,sessionStorage 的接口也是相同的。

$$

$$jsdemo$$
$$edit$$
localStorage.setItem("username", "张家的李狗蛋")
$$jsdemo$$
$$edit$$
alert(localStorage.getItem("username")) //张家的李狗蛋,重启浏览器仍然存在

序列化后保存

由于 storage 只能存储字符串,因此一些非字符串类型可以使用 JSON 对象进行序列化后再保存。

$$jsdemo$$
$$edit$$
let person = {
    name: "鸣人",
    age: 20,
}

localStorage.setItem("user", JSON.stringify(person))

提取时再反序列化。

$$jsdemo$$
$$edit$$
let person = JSON.parse(localStorage.getItem("user"))
console.log(typeof person) // object
console.log(person) // {name: '鸣人', age: 20}

类对象访问

Storage 提供了一种类对象的形式让我们方便地访问存储空间。

$$jsdemo$$
$$edit$$
// localStorage.setItem("name", "鸣人")
localStorage.name = "鸣人"

// alert(localStorage.getItem("name"))
alert(localStorage.name)

// localStorage.removeItem("鸣人")
delete localStorage.name

实战:保存数据的表格

实战项目成绩管理表 , 数据能实时保存在浏览器中,使用到了本章 Storage 的知识点与 JSON 对象章节知识点。

实战:保存主题色

实战项目主题色 , 将主题色保存到浏览器使其主题色设置后不会改变。


练习

  1. 实现以下随时保存的输入框效果,刷新页面后输入的内容依然存在。提示:使用到 oninput 事件

$$demo <textarea id="content" cols="20" rows="10" placeholder="随时保存的输入框"

</textarea> <script> const content = document.getElementById("content") content.oninput = function () { localStorage.setItem("content", content.value) } content.value = localStorage.getItem("content") </script> $$

$$answer

$$edit$$
<textarea
    id="content"
    cols="20"
    rows="10"
    placeholder="随时保存的输入框"
></textarea>
<script>
    const content = document.getElementById("content")
    content.oninput = function () {
        localStorage.setItem("content", content.value)
    }
    content.value = localStorage.getItem("content")
</script>

$$