1. localStorage 本地存储
localStorage 存储的特点 :
本地存储 就是把数据存储在浏览器端
1.如果我们把数据存储在localStorage里面 除非我们手动删除, 否则他就会一直存在(关闭浏览 器 电脑重启 等等 都不会删除)
2.数据的本地存储是按照不同网站来存储的(不同域名) 不同网址之间 数据不共享 但是同一网站的不同页面 数据共享
3.本地存储数据 只能存储字符串, 对于复杂数据类型的存储 会调用对应数据的toString 方法 变成字符串之后 在进行存储
存储复杂数据类型 使用 : JSON.stringify 方法把复杂数据转换成json字符串,
对于复杂数据类型 我们先使用 : JSON.stringify 方法把复杂数据转换成json字符串,
获取的时候 使用 : JSON.parse将其转换回来 进行还原
本地存储的方法 :
保存数据 localStorage.setItem(属性名字符串,属性值)
// 保存数据
document.getElementById("btn1").onclick = function () {
// 本体存储是以键值的形式来进行的
localStorage.setItem("name", "张三");
localStorage.setItem("age", "18");
localStorage.setItem("gender", "男");
};
获取数据 localStorage.getItem(属性名字符串)
// 获取数据
document.getElementById("btn2").onclick = function () {
// 本体存储是以键值的形式来进行的
var name = localStorage.getItem("name");
var age = localStorage.getItem("age");
var gender = localStorage.getItem("gender");
}
删除数据 localStorage.removeItem(属性名字符串)
// 删除数据 是一条一条删
document.getElementById("btn3").onclick = function () {
localStorage.removeItem("name");
localStorage.removeItem("age");
}
清除数据 localStorage.clear()
// 清空数据
document.getElementById("btn4").onclick = function () {
localStorage.clear();
}
存储对象 :
// 存储对象
document.getElementById("btn5").onclick = function(){
var obj1 = {
name : "lucy",
age : 18
}
var json = JSON.stringify(obj1);
localStorage.setItem("obj1", json)
}
获取对象 :
// 获取对象
document.getElementById("btn6").onclick = function(){
var objStr = localStorage.getItem("obj1");
// 转换成原本的对象
var obj2 = JSON.parse(objStr);
console.log(obj2);
}