localStorage语法：

增加数据 localStorage.setItem('键','值')

读取数据 localStorage.getItem('键')

删除数据 localStorage.removeitem('键')

清空数据 localStorage.clear()

注意：

a.localStorage只能存放字符串格式的数据就算你存放的是其他类型的取出来的也是字符串

b.localStorage是本地永久存储相当于是存在硬盘中国就算浏览器关了也不会丢失数据

c.作用域 :当前文件夹下;也就是说如果当前文件夹下存在test1和test2,且在test1文件中使用localStorage存储一对数据,在test2文件中通过getItem方法也可以获取到的

代码

<button id="btn1">增加属性</button>

<button id="btn2">读取数据</button>

<button id="btn3">删除数据</button>

<button id="btn4">清空数据</button>

        //1.增加数据
        document.getElementById('btn1').onclick = function () {
            localStorage.setItem('name', '王小美');
            localStorage.setItem('age', 18);
            localStorage.setItem('arr', [6, 655, 641, 6, 4, 0]);
        }
        // 2.读取数据
        document.getElementById('btn2').onclick = function () {
            console.log(localStorage.getItem('name'));
            console.log(localStorage.getItem('age'));
            console.log(localStorage.getItem('arr'));
        }
        // 3.删除数据
        document.getElementById('btn3').onclick = function () {
            localStorage.removeItem('age');
        }
        // 4.清空数据
        document.getElementById('btn4').onclick = function () {
            localStorage.clear();
        }

sessionStoage语法：

增加属性：sessionStorage.setItem('键','值')

读取数据：sessionStorage.getItem('键')

删除数据：sessionStorage.removeItem('键')

清空数据：sessionStorage.clear()

注意：

a.只能存放字符串

b.临时存储相当于存放在内存中页面关闭那数据就没有了

c.作用域:只能是当前页面或者是通过当前页面跳转的页面

代码

        //1.增加数据
        document.getElementById('btn1').onclick = function () {
            sessionStorage.setItem('name', '胡吃海喝的胡');
            sessionStorage.setItem('age', 20);
            sessionStorage.setItem('arr', [1516, 16, 655, 165, 165, 165, 1, 6516,]);
        }
        // 2.读取数据
        document.getElementById('btn2').onclick = function () {
            console.log(sessionStorage.getItem('name'));
            console.log(sessionStorage.getItem('age'));
            console.log(sessionStorage.getItem('arr'));
        }
        // 3.删除数据
        document.getElementById('btn3').onclick = function () {
            sessionStorage.removeItem('age')
        }
        // 4.清空数据
        document.getElementById('btn4').onclick = function () {
            sessionStorage.clear()
        }

基础语法就上面那些

如果想要在本地存储中存储其他类型的值可以使用JSON格式

JSON快速入门及语法

json:javascript object notation js对象表示法

其实就是一种数据格式本质是一个字符串

属性名必须要用双引号引起来

json数据转成js对象	js对象转成json数据
JSON.parse()	JSON.stringify()

        let json1 = '[12,15,13,15,3,45]';
        let json2 = '{"name":"王小美","age":18}';
        let json3 = '[{"name":"王小美","age":18},{"name":"胡吃海喝的胡","age":18},{"name":"dio","age":188}]'
        let obj1 = JSON.parse(json1);
        let obj2 = JSON.parse(json2)
        let obj3 = JSON.parse(json3)
        console.log(obj1);
        console.log(obj2);
        console.log(obj3);

        let obj1 = [12, 15, 13, 15, 3, 45];
        let obj2 = { "name": "王小美", "age": 18 };
        let obj3 = [{ "name": "王小美", "age": 18 }, { "name": "胡吃海喝的胡", "age": 18 }, { "name": "dio", "age": 188 }];
        let json1 = JSON.stringify(obj1)
        let json2 = JSON.stringify(obj2)
        let json3 = JSON.stringify(obj3)
        console.log(json1);
        console.log(json2);
        console.log(json3);

使用JSON解决存储对象的问题

<button class="btn1">存对象</button>
<button class="btn2">取对象</button>

        let obj = {
            name: '王小美',
            age: 19,
            gender: '女'
        }
        document.querySelector('.btn1').addEventListener('click', function () {
            // 转
            let json = JSON.stringify(obj)
            // 存
            sessionStorage.setItem('json', json)
        })
        document.querySelector('.btn2').addEventListener('click', function () {
            // 取
            let obj = sessionStorage.getItem('json');
            // 转
            let json = JSON.parse(obj);
            console.log(json);
        })

完

localStorage和sessionStorage本地存储以及JSON快速入门

localStorage语法：

sessionStoage语法：

JSON快速入门及语法

猜你喜欢