# 本地存储有什么用
- 用户登录后，记住用户名密码，下次打开时就不再重新登录
- 第一次访问某网站时，会弹出一个引导操作，下次访问时则不再出现，除非清空浏览器缓存
- 网站换肤，我们选择了某个皮肤后，下次访问该网站应该还是之前选择的那个皮肤样式
- 购物车同步（多页面间的通信）
- 记录用户的浏览记录
- 离线下载
只有一个本质：就是保存数据到用户本地（用户的终端设备中）
# 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>
|
