webStorage
-
存储内容大小一般支持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。
<!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>Document</title>
</head>
<body>
<button onclick="savaData()">保存数据</button>
<button onclick="readData()">读取数据</button>
<button onclick="deleteData()">删除数据</button>
<button onclick="clearData()">清空所有数据</button>
<script type="text/javascript">
let p = {
a: 123,
b: "dws"
}
function savaData() {
localStorage.setItem('msg', 123)
localStorage.setItem('p', JSON.stringify(p))
}
function readData() {
let result = localStorage.getItem("p")
console.log(result)
}
function deleteData() {
localStorage.removeItem("p")
}
function clearData() {
localStorage.clear()
}
</script>
</body>
</html>
|