一真的小站

鳶飛魚躍,無處不是化境。

0%

十、web存储

十、web存储

1.sessionstorage的使用

写法

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
<body>
<!--
sessionstorage的使用:存储数据到本地。存储的容量5mb左右。
setItem(key,value):存储数据,以键值对的方式存储
getItem(key):获取数据,通过指定名称的key获取对应的value值
removeItem(key):删除数据,通过指定名称key删除对应的值
clear():清空所有存储的内容<br> -->
<input type="text" id="userName"><br>
<input type="button" value="设置数据" id="setData">
<input type="button" value="获取数据" id="getData">
<input type="button" value="删除数据" id="removeData">
<script>
// 存储数据
document.querySelector("#setData").onclick = function() {
// 获取用户名
var name = document.querySelector("#userName").value;
// 存储数据
window.sessionStorage.setItem("userName", name);
}
// 获取数据
document.querySelector("#getData").onclick = function() {
var name = window.sessionStorage.getItem("userName");
alert(name);
}
// 删除数据
document.querySelector("#removeData").onclick = function() {
window.sessionStorage.removeItem("userName");
}
</script>
</body>

参数

对象 定义
onclick 事件会在元素被点击时发生
value 表单被提交时被发送到服务器的值
sessionStorage 存储数据到本地;存储的容量5mb左右
setItem 存储数据,以键值对的方式存储
getItem 获取数据,通过指定名称的key获取对应的value值
alert 用于显示带有一条指定消息和一个 确认 按钮的警告框
removeItem 删除数据,通过指定名称key删除对应的值

2.localstorage的使用

写法

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
<body>
<!-- localstorage的使用:
1.存储的内容大概20mb
2.不同浏览器不能共享数据。但是在同一个浏览器的不同窗口中可以共享数据
3.永久生效,它的数据是存储在硬盘上,并不会随着页面或者浏览器的关闭而清除
setItem(key,value):存储数据,以键值对的方式存储
getItem(key):获取数据,通过指定名称的key获取对应的value值
removeItem(key):删除数据,通过指定名称key删除对应的值
clear():清空所有存储的内容<br> -->
<input type="text" id="userName"><br>
<input type="button" value="设置数据" id="setData">
<input type="button" value="获取数据" id="getData">
<input type="button" value="删除数据" id="removeData">

<script>
document.querySelector("#setData").onclick = function() {
var name = document.querySelector("#userName").value;

/*使用localStorage存储数据*/
window.localstorage.setItem("userName", name);
}
/*获取数据*/
document.querySelector("#getData").onclick = function() {
var name = window.localstorage.getItem("userName")
alert(name);
}
/*清除数据*/
document.querySelector("#removeData").onclick = function() {
window.localstorage.removeItem("userName");
}
</script>
</body>

参数

对象 定义
localstorage 存储在硬盘;大概20mb
setItem 存储数据,以键值对的方式存储
getItem 获取数据,通过指定名称的key获取对应的value值
alert 用于显示带有一条指定消息和一个 确认 按钮的警告框
removeData 删除数据,通过指定名称key删除对应的值