本地储存
为什么需要本地存储呢:
- 数据存储在用户浏览器中,在控制台中Application模块中查看。
- 设置、读取方便、甚至页面刷新不丢失数据
- 容量较大,
sessionStorage
约5M、localStorage
约20M - 只能存储字符串,可以将对象
JSON.stringify()
编码后存储
Application模块:
本地储存分两种,一种是sessionStorage
,以及localStorage
.那么有什么异同点呢?
分别来说:
window.sessionStorage
-
生命周期为关闭浏览器窗口
-
在同一个窗口(页面)下数据可以共享
-
以键值对的形式存储使用
window.localStorage
-
声明周期永久生效,除非手动删除 否则关闭页面也会存在
-
可以多窗口(页面)共享(同一浏览器可以共享)
-
以键值对的形式存储使用
最大的区别:生命周期的不同,sessionStorage
在浏览器存储数据的页面关闭以后存储的数据就消失了,但是localStorage
即使浏览器存储数据的页面关闭了,数据也不会丢失,那怎么删除localStorage
存储的数据呢?使用localStorage.removeItem(key)
和localStorage.clear()
语句来删除。
相同点:都是用来存储数据的并且代码语法结构相似。下面细说一下存储数据结构的代码:
sessionStorage相关语法:
存储数据:
sessionStorage.setItem(key, value)
获取数据:
sessionStorage.getItem(key)
删除数据:
sessionStorage.removeItem(key)
清空数据:(所有都清除掉)
sessionStorage.clear()
localStorage相关语法:
存储数据:
localStorage.setItem(key, value)
获取数据:
localStorage.getItem(key)
删除数据:
localStorage.removeItem(key)
清空数据:(所有都清除掉)
localStorage.clear()
写一个小demo:
写一个案例存储数据的案例:localStorage
的语法是一样的所以在这里使用sessionStorage
存储:
演示: 存储一个名字叫king的数据到本地,并且在控制台查询出来,最后删除
在这里点击存储数据,看Application中sessionStorage
数据的变化:
点击获取数据:
点击删除数据或者删除所有数据:(因为只存储了一个数据,所以两个按钮的效果是一样的)
HTML部分:
<input type="text" name="" id="">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="delete">删除数据</button>
<button class="delete-all">删除所有数据</button>
JS部分:
var ipt = document.querySelector('input');
var set = document.querySelector('.set');
// 点击存储数据按钮 给本地存储一条数据(通过键值对存储 ,键随意设置,值是文本框的值)
set.addEventListener('click', function() {
var content = ipt.value;
sessionStorage.setItem('uname', content);
});
// 点击获取数据按钮 获取存储的数据(通过键来获取)
var get = document.querySelector('.get');
get.addEventListener('click', function() {
console.log(sessionStorage.getItem('uname'));
});
// 点击删除数据按钮 删除指定键对应的值
var del = document.querySelector('.delete');
del.addEventListener('click', function() {
sessionStorage.removeItem('uname');
});
// 点击删除所有数据,删除所有的键值对
var del_all = document.querySelector('.delete-all');
del_all.addEventListener('click', function() {
sessionStorage.clear();
});
不断复盘,不断优秀,让自己成为镜子里想成为的那个人.关注三连,持续更新~~~