|
目录
概述
本地存储特性
window.sessionStorage
window.localStorage
案例：记住用户名
概述
? 随着互联网的快速发展，基于网页的应用越来越普遍，同时变得越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。
本地存储特性
1、数据存储在用户浏览器中
2、设置、读取方便，甚至页面刷新不丢失数据
3、容量较大，sessionStorage约5M，localStorage约20M
4、只能存储字符串，可以将对象JSON.stringify（）编码后存储
window.sessionStorage
1、生命周期为关闭浏览器窗口
2、在同一个窗口（页面）下数据可以共享
3、以键值对的形式存储使用
<body>
<input type="text">
<button>存储数据</button>
<button>获取数据</button>
<button>删除数据</button>
<button>清空数据</button>
<script>
var input = document.querySelector('input');
var btn = document.querySelectorAll('button');
// 存储
btn[0].onclick = function () {
var text = input.value;
// 存储数据 key , value
sessionStorage.setItem('text', text);
}
// 获取
btn[1].onclick = function () {
// 获取数据 key
console.log(sessionStorage.getItem('text'));
}
// 删除
btn[2].onclick = function () {
// 删除数据 key
sessionStorage.removeItem('text');
}
// 清空
btn[3].onclick = function () {
// 清空所有数据
sessionStorage.clear();
}
</script>
</body>
window.localStorage
1、声明周期永久生效，除非手动删除，否则关闭页面也会存在
2、可以多窗口（页面）共享（同一浏览器可以共享）
3、以键值对的形式存储使用
<body>
<input type="text">
<button>存储数据</button>
<button>获取数据</button>
<button>删除数据</button>
<button>清空数据</button>
<script>
var input = document.querySelector('input');
var btn = document.querySelectorAll('button');
// 存储
btn[0].onclick = function () {
var text = input.value;
// 存储数据 key , value
localStorage.setItem('text', text);
}
// 获取
btn[1].onclick = function () {
// 获取数据 key
console.log(localStorage.getItem('text'));
}
// 删除
btn[2].onclick = function () {
// 删除数据 key
localStorage.removeItem('text');
}
// 清空
btn[3].onclick = function () {
// 清空所有数据
localStorage.clear();
}
</script>
</body>
案例：记住用户名
<body>
<input type="text">
<input type="checkbox" name="" id="">记住用户名
<script>
// 当勾选记住用户名时,下次打开页面显示记住的用户名
var input = document.querySelectorAll('input')[0];
var check = document.querySelectorAll('input')[1];
// 判断本地存储是否有该数据 有 勾选复选框 文本框显示该数据
if (localStorage.getItem('userName')) {
check.checked = true;
input.value = localStorage.getItem('userName');
}
// change事件 当值发生改变时触发
check.addEventListener('change', function () {
// 如果勾选 将数据存储到本地存储 否则删除
if (check.checked) {
localStorage.setItem('userName', input.value);
} else {
localStorage.removeItem('userName');
}
})
</script>
</body>
|