1、本地存储特性
- 数据存储在用户浏览器中
- 设置、读取方便，甚至页面刷新不会丢失数据
- 容量较大，sessionStorage约5M、localStorage约20M
- 只能存储字符串，可以将对象JSON.stringify()编码后存储。
2、window.sessionStorage
- 生命周期为关闭浏览器窗口
- 在同一个窗口或页面下数据可以共享
- 以键值对的形式存储使用
<body>
<input type="text" name="" id="">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空所以数据</button>
</body>
<script>
window.addEventListener("load",function(){
var text = document.querySelector("input");
var set = document.querySelector(".set")
var get = document.querySelector(".get")
var remove = document.querySelector(".remove")
var del = document.querySelector(".del")
// 存储数据
set.addEventListener("click",function(){
var val = text.value;
sessionStorage.setItem("uname",val);
})
// 获取数据
get.addEventListener("click",function(){
var uname = sessionStorage.getItem("uname")
console.log(uname);
})
// 删除数据
remove.addEventListener("click",function(){
sessionStorage.removeItem("uname")
})
// 清空所有数据
del.addEventListener("click",function() {
sessionStorage.clear();
})
})
</script>
3、window.localStorage
- 生命周期永久存在，除非手动删除，否则关闭页面也会存在
- 可以多窗口（页面）共享（同一浏览器）
- 以键值对的形式存储使用
<body>
<input type="text" name="" id="">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空所以数据</button>
</body>
<script>
window.addEventListener("load",function(){
var text = document.querySelector("input");
var set = document.querySelector(".set")
var get = document.querySelector(".get")
var remove = document.querySelector(".remove")
var del = document.querySelector(".del")
// 存储数据
set.addEventListener("click",function() {
var val = text.value;
localStorage.setItem("uname",val);
})
// 获取数据
get.addEventListener("click",function() {
var uname = localStorage.getItem("uname")
console.log(uname);
})
// 删除数据
remove.addEventListener("click",function(){
localStorage.removeItem("uname");
})
// 清空所有数据
del.addEventListener("click",function(){
localStorage.clear();
})
</script>
