JavaScript 基础
Document
运算符
深入数据和类型
函数进阶
原型、继承
类
浏览器存储
Web API
事件
错误处理
异步编程
网络请求
模块
练习
实例
工具与规范
软件架构模式
设计模式
有时我们希望能在浏览器中存储一些数据, 而 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 对象章节知识点。
实战:保存主题色
实战项目主题色 , 将主题色保存到浏览器使其主题色设置后不会改变。
练习
- 实现以下随时保存的输入框效果,刷新页面后输入的内容依然存在。提示:使用到 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>
$$