H5 本地存储

1. localStorage 本地存储

本地存储 就是把数据存储在浏览器端
本地存储的方法 :

1. 保存数据 localStorage.setItem(属性名字符串,属性值)

// 保存数据
        document.getElementById("btn1").onclick = function () {
            // 本体存储是以键值的形式来进行的
             localStorage.setItem("name", "张三");
             localStorage.setItem("age", "18");
             localStorage.setItem("gender", "男");
        };
        

保存数据 图 :

2. 获取数据 localStorage.getItem(属性名字符串)

// 获取数据
        document.getElementById("btn2").onclick = function () {
            // 本体存储是以键值的形式来进行的
             var name = localStorage.getItem("name");
             var age =  localStorage.getItem("age");
             var gender =  localStorage.getItem("gender");
        }

3. 删除数据 localStorage.removeItem(属性名字符串)

// 删除数据  是一条一条删
	document.getElementById("btn3").onclick = function () {

          localStorage.removeItem("name");
          localStorage.removeItem("age");         
        }

4. 清除数据 localStorage.clear()

// 清空数据
	 document.getElementById("btn4").onclick = function () {
	 
          localStorage.clear();       
        }

localStorage 存储的特点 :

1. 如果我们把数据存储在localStorage里面 除非我们手动删除, 否则他就会一直存在(关闭浏览 器 电脑重启 等等 都不会删除)
2. 数据的本地存储是按照不同网站来存储的(不同域名) 不同网址之间 数据不共享 但是同一网站的不同页面 数据共享
3. 本地存储数据 只能存储字符串, 对于复杂数据类型的存储 会调用对应数据的toString 方法 变成字符串之后 在进行存储

存储复杂数据类型 使用 : JSON.stringify 方法把复杂数据转换成json字符串,
对于复杂数据类型 我们先使用 : JSON.stringify 方法把复杂数据转换成json字符串,
获取的时候 使用 : JSON.parse将其转换回来 进行还原

存储对象 :

//  存储对象
        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);
            
        }

存储数组 :

// 存储数组
        document.getElementById("btn7").onclick = function(){
            var arr1 = [10,20,30];
            var arrStr = JSON.stringify(arr1);
            localStorage.setItem("arr1", arrStr)
        }

获取数组 :

// 获取数组
        document.getElementById("btn8").onclick = function(){
            var str = localStorage.getItem("arr1");
            var res = JSON.parse(str);
            console.log(res);

            var str = localStorage.getItem("arr");
            var res = JSON.parse(str);
            console.log(res);            
        }