Web 本地存储
Web Storage API
关键对象
window.sessionStorage对象用于区域存储；window.localStorage对象用于本地存储。
特点
- 数据的设置和读取比较方便。
- 容量较大，
sessionStorage大约为5MB，localStorage大约为20MB。 - 只能存储字符串，若想要存储JSON对象，则可以使用
window.JSON.stringify()或者parse()进行序列化和反序列化编码
区别
sessionStorage的存储周期只有一次会话(关闭浏览器就会消失)
localStorage的存储周期是永久的(关闭浏览器数据还在)，除非用户手动清除浏览器缓存文件
属性和方法
window.localStorage.setItem('键','值')
window.sessionStorage.setItem('键','值')
| 方法/属性 | 描述 |
|---|---|
| key(n) | 该方法用于返回存储对象中第n个key的名称 |
| setItem(key, value) | 该方法接收一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值 |
| getItem(key) | 该方法接收一个键名作为参数，返回键名对应的值 |
| removeItem(key) | 该方法删除键名为key的存储内容 |
| clear() | 该方法清空所有存储内容 |
| length | 该属性返回Storage存储对象中包含的item的数量 |
localStorage简单数据存储实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="username">
<button id="setData">设置数据</button>
<button id="getData">获取数据</button>
<button id="delData">删除数据</button>
<script>
var username = document.querySelector('#username');
// 单击“设置数据”按钮，设置数据
document.querySelector('#setData').onclick = function () {
var val = username.value; // 获取username里面的值
//window.sessionStorage.setItem('username', val);//一个会话，关闭网页后，数据不会保存
window.localStorage.setItem('username',val)//只要不主动清除，一直都在
};
// 单击“获取数据”按钮，获取数据
document.querySelector('#getData').onclick = function () {
// alert(window.sessionStorage.getItem('username'));
alert(window.localStorage.getItem('username'))
};
// 单击“删除数据”按钮，删除数据
document.querySelector('#delData').onclick = function () {
// window.sessionStorage.removeItem('username');
window.localStorage.removeItem('username')
};
if (window.sessionStorage) {
// 浏览器支持sessionStorage
} else if (window.localStorage) {
// 浏览器支持localStorage
}
</script>
</script>
</body>
</html>vue中的实例标签记录器">localStorage在Vue中的实例(标签记录器)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"
integrity="sha384-t1tHLsbM7bYMJCXlhr0//00jSs7ZhsAhxgm191xFsyzvieTMCbUWKMhFg9I6ci8q"
crossorigin="anonymous"></script>
<style>
body {
padding: 0;
margin: 0;
}
.divcenter {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 50%;
}
p {
border: solid 1px;
margin: 0px;
padding: 0px;
}
.spanX {
float: right;
margin-right: 10px;
width: 10px;
}
span {
cursor: pointer;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<div id="app" class="divcenter">
<h2>标签记录器</h2>
<!--文本框，设置双向绑定和回车事件-->
<div>
<input type="text" placeholder="请输入相应信息后按回车键！" v-model="text" @keyup.Enter="info"
style="width: 100%;height: 40px;">
</div>
<div>
<!--回车后添加的标签和删除按钮-->
<p v-for="(list,index) in arr">
<span style="background-color: blanchedalmond;"> {{index+1}} </span>
{{list}}
<span class="spanX" @click="del(index)">x</span>
</p>
<!--显示总数和清空按钮-->
<div style="border: solid 1px;" v-show="arr.length!=0">
<span>总数：{{arr.length}}</span>
<span style="float: right;" @click="delAll">Clear</span>
</div>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
//记录数据的数组，将保存到localStorage的字符串数据转换为对象数据重新保存到数组中
arr: JSON.parse(window.localStorage.getItem('UserData')||'[]'),
text: "",
},
methods: {
//回车触发事件，把文本框里的内容保存到数组arr中
info: function () {
//在末尾添加一条数据
this.arr.push(this.text);
this.text = "";
},
//单击删除按钮触发事件，清除指定下标数组的值
del: function (index) {
//根据下标删除1条数据
this.arr.splice(index, 1);
},
//单击清空按钮，清除数组arr里所有是值
delAll: function () {
this.arr = [];
}
},
//监听事件
watch:{
//数据在标签内部改变是否触发：true
deep:true,
//要记录数据的数组，(名字要好保存数据的数组名一致)，当arr数据发送改变时触发，新的数据返回到newVale中
arr(newVale){
//将新的对象数据转换为字符串数据赋值给变量
let json_data=JSON.stringify(newVale)
//将字符串数据按照键值对的方式保存到localStorage中
window.localStorage.setItem('UserData',json_data)
}
}
})
</script>
</body>
</html>
