浏览器localStorage 本地存储

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); }