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

两者有以下不同点：

	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>

$$