浏览器本地存储
PPG007 ... 2021-12-25 Less than 1 minute
# 浏览器本地存储
本地存储分为 localStorage 和 sessionStorage,前者持久保存(清除浏览器缓存可能导致失效)，后者关闭浏览器即清空，都是 window 的对象，二者 API 名字完全一致。
# localStorage
function saveData(){
let person={name:'PPG',age:21};
window.localStorage.setItem('msg',JSON.stringify(person));
}
function readData(){
alert(localStorage.getItem('msg'))
console.log(JSON.parse(localStorage.getItem('msg')))
}
function deleteData(){
console.log(localStorage.removeItem('msg'))
}
function deleteAll(){
localStorage.clear();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# sessionStorage
function saveData(){
let person={name:'PPG',age:21};
sessionStorage.setItem('msg',JSON.stringify(person));
}
function readData(){
alert(sessionStorage.getItem('msg'))
console.log(JSON.parse(sessionStorage.getItem('msg')))
}
function deleteData(){
console.log(sessionStorage.removeItem('msg'))
}
function deleteAll(){
sessionStorage.clear();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
浏览器本地存储：
- 存储内容大小一般为 5MB。
- 浏览器端通过
sessionStorage或localStorage实现本地存储。 - 获取不存在的 key 得到的 value 为null。