浏览器本地存储
文章发布较早，内容可能过时，阅读注意甄别。
# 代码
# localStorage.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>localStorage</title>
</head>
<body>
<h2>localStorage</h2>
<button onclick="saveData()">点我保存一个数据</button>
<button onclick="readData()">点我读取一个数据</button>
<button onclick="deleteData()">点我删除一个数据</button>
<button onclick="deleteAllData()">点我删除所有数据</button>
<script type="text/javascript">
let p = { name: "张三", age: 18 };
function saveData() {
localStorage.setItem("msg", "hello");
localStorage.setItem("msg2", 666); // number 会被转成字符串
localStorage.setItem("person", JSON.stringify(p));
}
function readData() {
console.log(localStorage.getItem("msg"));
console.log(localStorage.getItem("msg2"));
const rst = localStorage.getItem("person");
console.log(JSON.parse(rst));
}
function deleteData() {
localStorage.removeItem("msg");
}
function deleteAllData() {
localStorage.clear();
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
# sessionStorage.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>sessionStorage</title>
</head>
<body>
<h2>sessionStorage</h2>
<button onclick="saveData()">点我保存一个数据</button>
<button onclick="readData()">点我读取一个数据</button>
<button onclick="deleteData()">点我删除一个数据</button>
<button onclick="deleteAllData()">点我删除所有数据</button>
<script type="text/javascript">
let p = { name: "张三", age: 18 };
function saveData() {
sessionStorage.setItem("msg", "hello");
sessionStorage.setItem("msg2", 666); // number 会被转成字符串
sessionStorage.setItem("person", JSON.stringify(p));
}
function readData() {
console.log(sessionStorage.getItem("msg"));
console.log(sessionStorage.getItem("msg2"));
const rst = sessionStorage.getItem("person");
console.log(JSON.parse(rst));
}
function deleteData() {
sessionStorage.removeItem("msg");
}
function deleteAllData() {
sessionStorage.clear();
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
# 笔记
- 存储内容大小一般支持
5MB左右（不同浏览器可能还不一样） - 浏览器端通过
Window.sessionStorage和Window.localStorage属性来实现本地存储机制。 - 相关 API：
xxxxxStorage.setItem('key', 'value');该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。xxxxxStorage.getItem('person'); 该方法接受一个键名作为参数，返回键名对应的值。xxxxxStorage.removeItem('key'); 该方法接受一个键名作为参数，并把该键名从存储中删除。xxxxxStorage.clear() 该方法会清空存储中的所有数据。- 备注：
SessionStorage存储的内容会随着浏览器窗口关闭而消失。LocalStorage存储的内容，需要手动清除才会消失。xxxxxStorage.getItem(xxx)如果 xxx 对应的 value 获取不到，那么 getItem 的返回值是 null。JSON.parse(null)的结果依然是 null。
上次更新: 2024/06/13, 22:13:45
|