目录
概述
我们可以利用本地存储将开发过程中的一些数据存储在本地。
本地存储特性
1.数据存储在用户浏览器中。
2.设置、读取方便，刷新页面存储的数据不会丢失。
3.容量较大，sessionStorege约5M，localstorege约20M（对于存储字符算大）。
4.只能存储字符串。
sessionStorege
说明：
1.sessionStorege的生命周期为浏览器窗口的生命周期，只要关闭浏览器就销毁。
2.sessionStorege存储大小约为5M。
3.在同一个页面下数据可以共享。
4.以键值对的形式存储使用。
使用方法
1.存储数据：setItem(key,value)
2.获取数据：getItem(key)
3.删除数据：removeItem(key)
4.删除所有存储的数据：clear()
使用案例
<button id="get">点击获取存储的留言</button><button id="del">删除存储的留言</button>
<div></div>
<script>
let temp = prompt("请输入需要存储的留言");
sessionStorage.setItem("text",temp);
// 获取元素
var get = document.querySelector("#get");
var del = document.querySelector("#del");
var data = document.querySelector("div");
//绑定事件-点击获取存储数据
get.addEventListener("click",function(){
data.innerHTML = sessionStorage.getItem("text");
})
//点击删除存储数据
del.addEventListener("click",function(){
sessionStorage.clear();
data.innerHTML = "";
})
</script>效果
点击获取数据
点击删除数据
localStorege
说明
1.生命周期永久生效，关闭页面也还会存在 ，除非手动删除。
2.可以多页面共享数据（需要同浏览器）。
3.以键值对的方式存储使用。
使用
localStorege的方法和使用跟sessionStorege基本一致。
两者的使用选择：
可以考虑生命周期和是否需要多页面共享，来对两者进行选择使用。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/154556.html
