本地存储(local和session）
html5中的Web Storage包括了两种存储方式：
localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问
并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅是会话级别的存储。只允许同一窗口访问。
而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。同源可以读取并修改localStorage数据。
本地存储特性
1、数据存储在浏览器中。
2、设置、读取方便、甚至页面刷新不丢失数据。
3、容量比Cookie大Cookie是一段不超过4KB的小型[文本](https://baike.baidu.com/item/文本/5443630)数据，由一个名称（Name）、一个值（Value），sessionStorage约5M、localStorage约20M。
4、localStorage和sessionStorage存储数据的格式都是以字符串的形式来存储的，，可以将对象JSON.stringify() 编码后存储。
操作方式：
存：
[JavaScript] 纯文本查看 复制代码 var obj = {"name":"xiaoming","age":"16"}
localStorage.setItem("userInfo",JSON.stringify(obj));
取：
[JavaScript] 纯文本查看 复制代码 var user = JSON.parse(localStorage.getItem("userInfo"))
删：
[JavaScript] 纯文本查看 复制代码 localStorage.remove("userInfo);
[JavaScript] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- HTML代码，不做解释 -->
<input type="text" name="" id="" value="" class="ipt" />
<button class="setItem" type="button">储存</button>
<button class="getItem" type="button">显示</button>
<button class="removeItem" type="button">删除</button>
<button class="clear" type="button">删除全部</button>
<script>
/*localStorage:
生命周期为永久，不删除不消失，必须在相同地址的页面，也不可更换浏览器
*/
//获取节点
var ipt = document.querySelector('.ipt')
var set = document.querySelector('.setItem')
var get = document.querySelector('.getItem')
var remove = document.querySelector('.removeItem')
var deall = document.querySelector('.clear')
//监听注册方式绑定点击事件
set.addEventListener('click', function() {
//给input内容定义变量名
var eal = ipt.value;
//setItem储存,第一个值为key，也就是索引
window.localStorage.setItem('text', eal)
});
//getItem获取,根据key得到值
get.addEventListener('click', function() {
alert('您储存的数据为:' + window.localStorage.getItem('text'))
})
//removeItem删除,删除key的值
remove.addEventListener('click', function() {
window.localStorage.removeItem('text')
})
//clear删除全部，不需要key全都删
deall.addEventListener('click', function() {
window.localStorage.clear()
})
</script>
</body>
</html>
sessionStorage具体:
[JavaScript] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- HTML代码，不做解释 -->
<input type="text" name="" id="" value="" class="ipt" />
<button class="setItem" type="button">储存</button>
<button class="getItem" type="button">显示</button>
<button class="removeItem" type="button">删除</button>
<button class="clear" type="button">删除全部</button>
<script>
/*sessionStorage:
1、生命周期为关闭浏览器窗口
2、在同一个窗口(页面)下数据可以共享
3、以键值对的形式存储使用
*/
//获取节点
var ipt = document.querySelector('.ipt')
var set = document.querySelector('.setItem')
var get = document.querySelector('.getItem')
var remove = document.querySelector('.removeItem')
var deall = document.querySelector('.clear')
//监听注册方式绑定点击事件
set.addEventListener('click', function() {
//给input内容定义变量名
var eal = ipt.value;
//setItem储存,第一个值为key，也就是索引
window.sessionStorage.setItem('text', eal)
});
//getItem获取,根据key得到值
get.addEventListener('click', function() {
alert('您储存的数据为:' + window.sessionStorage.getItem('text'))
})
//removeItem删除,删除key的值
remove.addEventListener('click', function() {
window.sessionStorage.removeItem('text')
})
//clear删除全部，不需要key全都删
deall.addEventListener('click', function() {
window.sessionStorage.clear()
})
</script>
</body>
</html> | 
发表于 2021-11-8 19:54
