一、什么是浏览器本地存储
比如上面的搜索历史记录, 就保存在浏览器本地存储里面
二、怎么实现浏览器本地存储
在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>
<h2>localStorage</h2>
<button onclick="saveData()">点我保存一个数据</button>
<script>
function saveData(){
window.localStorage.setItem("msg", "123")
}
</script>
</body>
</html>
读取本地存储的数据
使用localStorage.getItem()可以读取一条数据
<body>
<h2>localStorage</h2>
<button onclick="showData()">点我读取一个数据</button>
<script>
function showData() {
console.log(localStorage.getItem('msg'));
}
</script>
</body>
删除本地存储的数据
使用localStorage.removeItem()可以读取一条数据
<body>
<h2>localStorage</h2>
<button onclick="removeData()">点我删除一个数据</button>
<script>
function removeData() {
localStorage.removeItem('msg')
}
</script>
</body>
三、sessionStorage
sessionStorage上面的api和localStorage是一样的.
他俩的区别就是关闭浏览器后, localStorage的数据还存在, sessionStorage的数据就会消失
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h64293.shtml
