html5 LocalStorage本地存储介绍

前言

Web存储对象有localStorage和sessionStorage两种，它允许我们以键值对的形式在浏览器上保存数据。

相同点

1 LocalStorage

1.1 LocalStorage介绍

特点：

• localStorage 用于长久保存网站数据，无过期时间，除非删除。
• 在同源的所有标签页与窗口之间数据共享。
• 存储字段类型为字符串，使用需自己转换为所需类型

1.2 检测浏览器是否支持

if (window.localStorage) {
    alert('该浏览器支持 localStorage');
} else {
    alert('该浏览器不支持localStorage！！！');
}
1
2
3
4
5

1. 3 LocalStorage读写

1.3.1 写/读/删 操作

写：有三种方式如下代码所示
删除键：localStorage.removeItem("你的key值")
全部清空：localStorage.clear()

// 三种写方法
localStorage.nick = "有勇气的牛排";
localStorage["uid"] = 1;
localStorage.setItem("lv", "9");

// 三种读方法
console.log(localStorage.nick)
console.log(localStorage["uid"])
console.log(localStorage.getItem("lv"))

// 通用删除
localStorage.removeItem("nick")
localStorage.removeItem("uid")
localStorage.removeItem("lv")

// delete 删除方法
// delete localStorage.nick

// 全部清除
// localStorage.clear()

// 读
console.log("---")
console.log(localStorage.nick)
console.log(localStorage["uid"])
console.log(localStorage.getItem("lv"))
console.log("---")
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

1.3.2 查看所有键值对

方法：key()

// 写
localStorage.nick = "有勇气的牛排";
localStorage["uid"] = 1;
localStorage.setItem("lv", "9");

// 遍历所有键值对
for (let i = 0; i < localStorage.length; i++) {
    let key = localStorage.key(i);
    let value = localStorage.getItem(key)
    console.log(key + " : " + value)
    // alert(`${key}: ${localStorage.getItem(key)}`);
}
1
2
3
4
5
6
7
8
9
10
11
12

1.3.3 存储json对象

// 存储json对象
localStorage.userinfo = JSON.stringify({uid: 1, nick: "有勇气的牛排"})

// 读取
let userinfo = JSON.parse(localStorage.userinfo)

console.log(userinfo.uid)
console.log(userinfo.nick)
1
2
3
4
5
6
7
8

2 sessionStorage

2.1 sessionStorage介绍

使用方法同localStorage，但是有如下不同：

• 数据仅存在于当前浏览器标签页。
• 同源且同一标签页下的iframe之间数据共享。
• 具有相同页面的另一个标签页将会有不同的存储。
• 浏览器关闭后，数据不保留。

2.2 使用方法

请参考localStorage