# 本地存储有什么用
- 用户登录后,记住用户名密码,下次打开时就不再重新登录
- 第一次访问某网站时,会弹出一个引导操作,下次访问时则不再出现,除非清空浏览器缓存
- 网站换肤,我们选择了某个皮肤后,下次访问该网站应该还是之前选择的那个皮肤样式
- 购物车同步(多页面间的通信)
- 记录用户的浏览记录
- 离线下载
只有一个本质:就是保存数据到用户本地(用户的终端设备中)
# localStorage–永久存储
-
读
1 2
| localStorage.getItem("变量名"); var n=localStorage.name;
|
-
写 (保存)
1 2 3 4 5
| localStorage.setItem("变量名",'要保存的数据') 第二种写法: localStorage."变量名"='数据' 比如: localStorage.name='张三'
|
-
修改,跟保存一样
1 2 3 4 5
| localStorage.setItem("变量名",'新的数据') 第二种写法: localStorage."变量名"='数据' 比如: localStorage.name='张三'
|
-
删除
a. 删除一个
1
| localStorage.removeItem("变量名")
|
b. 删除所有(清空)
# sessionStorage - 临时存储
方法跟 localStorage 一样。
# 永久存储和临时存储的区别
可以简单理解为:永久变量和全局变量的区别。
- localStorage : 本地存储
不会和服务器交互
存储数据量更大,IE8 是 10M
永久存储(除非手动删除数据)
- sessionStorage:会话存储
session 临时会话,从页面打开到页面关闭的时间段
只能在访问这个网站的时候去设置和获取这个数据
窗口的临时存储,页面关闭,本地存储消失
# 本地存储案例
# 恢复用户表单数据
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92
| <!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>作业2</title> <style> .box { border: 1px solid red; margin: 100px auto; width: 400px; height: 350px; padding-left: 10px; }
.form { margin-top: 30px; margin-left: 15px; border-bottom: 1px solid #000; }
.save { margin-left: 15px; } </style> </head>
<body> <div class="box"> <h3>localStorage</h3> <form class="form" action="#"> <p> username :<input type="text" name="" id=""> </p> <p> destination :<input type="text" name="" id=""> </p> <p> transportation:<input type="text" name="" id=""> </p> <p> <button id="clear">Clear</button> <button id="go">Go</button> </p> </form> <div class="save"> <p> username :<span id="user"></span> </p> <p> destination :<span id="des"></span> </p> <p> transportation:<span id="tra"></span> </p> </div> </div> <script> var clear = document.getElementById("clear"); var go = document.getElementById("go"); var ipt = document.getElementsByTagName("input"); var user = document.getElementById("user"); var des = document.getElementById("des"); var tra = document.getElementById("tra"); clear.onclick = function () { localStorage.removeItem("user"); localStorage.removeItem("des"); localStorage.removeItem("tra"); user.innerText=""; des.innerText=""; tra.innerText=""; } go.onclick = function () { localStorage.setItem("user", ipt[0].value); localStorage.setItem("des", ipt[1].value); localStorage.setItem("tra", ipt[2].value); user.innerText=localStorage.getItem("user", ipt[0].value); des.innerText=localStorage.getItem("des", ipt[1].value); tra.innerText=localStorage.getItem("tra", ipt[2].value); } window.onload = function () { user.innerText=localStorage.getItem("user", ipt[0].value); des.innerText=localStorage.getItem("des", ipt[1].value); tra.innerText=localStorage.getItem("tra", ipt[2].value); } </script> </body>
</html>
|
# 引导页
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> #mask{ position: fixed; top:0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; text-align: center; color: #fff; font-size: 30px; background-color:rgba(0,0,0,0.5); } #mask button{ position: fixed; right: 10px; top: 20px; font-size: 30px; color: #fff; } </style> </head> <body> 网页内容
<div id="mask" style="display: none"> 这里是引导页 <button>关闭</button> </div> <script> //引导页是否显示,取决用户是否是第一次访问你的网站 if(localStorage.getItem('baidukey')==null){ document.getElementById("mask").style.display="block"; } var btn=document.querySelector("#mask button"); btn.onclick=function(){ document.getElementById("mask").style.display="none"; // 当用户点击关闭引导页后,写入一个本地存储的值 localStorage.setItem('baidukey',true); } </script> </body> </html>
|