文章目录
- 前言
- 1 LocalStorage
- 1.1 LocalStorage介绍
- 1.2 检测浏览器是否支持
- 1. 3 LocalStorage读写
- 1.3.1 写/读/删 操作
- 1.3.2 查看所有键值对
- 1.3.3 存储json对象
- 2 sessionStorage
- 2.1 sessionStorage介绍
- 2.2 使用方法
前言
Web存储对象有localStorage和sessionStorage两种,它允许我们以键值对的形式在浏览器上保存数据。
相同点
属性 | 说明 |
setItem(key, value) | 存储键值对 |
getItem(key) | 获取键的值 |
removeItem(key) | 删除指定键 |
clear | 删除所有数据 |
key(index) | 获取对应索引的键名 |
length | 存储键值对数据 |
1 LocalStorage
1.1 LocalStorage介绍
特点:
- localStorage 用于长久保存网站数据,无过期时间,除非删除。
- 在同源的所有标签页与窗口之间数据共享。
- 存储字段类型为字符串,使用需自己转换为所需类型
1.2 检测浏览器是否支持
if (window.localStorage) {
alert('该浏览器支持 localStorage');
} else {
alert('该浏览器不支持localStorage!!!');
}
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.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.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)
2 sessionStorage
2.1 sessionStorage介绍
使用方法同localStorage
,但是有如下不同:
- 数据仅存在于当前浏览器标签页。
- 同源且同一标签页下的iframe之间数据共享。
- 具有相同页面的另一个标签页将会有不同的存储。
- 浏览器关闭后,数据不保留。
2.2 使用方法
请参考localStorage