今天小编给大家分享一下Javascript怎么实现浏览器本地存储的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
一、什么是浏览器本地存储
比如上面的搜索历史记录, 就保存在浏览器本地存储里面
二、怎么实现浏览器本地存储
在window身上有一个localStorage属性, 这个属性有一个setItem方法, 接收两个参数,一个key,一个value.
注意 : key和value必须都是字符串
<!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>
<h3>localStorage</h3>
<button onclick="saveData()">点我保存一个数据</button>
<script>
function saveData(){
window.localStorage.setItem("msg", "123")
}
</script>
</body>
</html>
读取本地存储的数据
使用localStorage.getItem()可以读取一条数据
<body>
<h3>localStorage</h3>
<button onclick="showData()">点我读取一个数据</button>
<script>
function showData() {
console.log(localStorage.getItem('msg'));
}
</script>
</body>
删除本地存储的数据
使用localStorage.removeItem()可以读取一条数据
<body>
<h3>localStorage</h3>
<button onclick="removeData()">点我删除一个数据</button>
<script>
function removeData() {
localStorage.removeItem('msg')
}
</script>
</body>
三、sessionStorage
sessionStorage上面的api和localStorage是一样的.
他俩的区别就是关闭浏览器后, localStorage的数据还存在, sessionStorage的数据就会消失
以上就是“Javascript怎么实现浏览器本地存储”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。
