随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经
常性在本地存储大量的数据, HTML5规范提出了相关解决方案。
本地存储特性
1、数据存储在用户浏览器中
2、设置、读取方便、甚至页面刷新不失数据
3、容量较大, sessionStorage约5M、localStorage约20M
window.sessionStorage
1.生命周期为关闭浏览器窗口
2.在同一个窗口(页面)下数据可以共享
3.以键值对的形式储存使用
存储数据:window.sessionStorage(key,value)
html>
lang="en">
charset="UTF-8">
name="viewport" content="width=device-width, initial-scale=1.0">
body{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
input {
outline: none;
width: 200px;
height: 50px;
font-size: 30px;
line-height: 20%;
}
type="text">
var inp = document.querySelector('input');
var sto = document.querySelector('.sto');
var acq = document.querySelector('.acq');
var del = document.querySelector('.del');
var emp = document.querySelector('.emp');
sto.addEventListener('click', function () {
//储存数据
var val=inp.value;
sessionStorage.setItem('uname', val);
sessionStorage.setItem('pwd', val);
})
acq.addEventListener('click', function () {
//获取数据
sessionStorage.getItem('uname');
console.log(sessionStorage.getItem('uname'));
})
del.addEventListener('click', function () {
//删除数据
sessionStorage.removeItem('uname');
})
emp.addEventListener('click', function () {
//清空数据
sessionStorage.clear();
})
window.localStorage
1.生命周期永久生效,除非手动删除否则关闭页面也会存在
2、可以多窗口(同一浏览器可以共享)
3.以键值对的形式存储使用
html>
lang="en">
charset="UTF-8">
name="viewport" content="width=device-width, initial-scale=1.0">
body{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
input {
outline: none;
width: 200px;
height: 50px;
font-size: 30px;
line-height: 20%;
}
type="text">
var inp = document.querySelector('input');
var sto = document.querySelector('.sto');
var acq = document.querySelector('.acq');
var del = document.querySelector('.del');
var emp = document.querySelector('.emp');
sto.addEventListener('click', function () {
//储存数据
var val=inp.value;
localStorage.setItem('username', val);
})
acq.addEventListener('click', function () {
//获取数据
localStorage.getItem('username');
console.log(localStorage.getItem('username'));
})
del.addEventListener('click', function () {
//删除数据
localStorage.removeItem('username');
})
emp.addEventListener('click', function () {
//清空数据
localStorage.clear();
})