localStorage syntax:

Add data localStorage.setItem('key','value')

Read data localStorage.getItem('key')

Delete data localStorage.removeitem('key')

Clear data localStorage.clear()

Notice:

a.localStorage can only store data in string format, even if you store other types of data, it is also a string

b. localStorage is local permanent storage, which is equivalent to storing on the hard disk. China will not lose data even if the browser is closed.

c. Scope: under the current folder; that is to say, if there are test1 and test2 under the current folder, and a pair of data is stored in the test1 file using localStorage, it can also be obtained through the getItem method in the test2 file

the code

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

sessionStore syntax:

Add property: sessionStorage.setItem('key','value')

Read data: sessionStorage.getItem('key')

Delete data: sessionStorage.removeItem('key')

Clear data: sessionStorage.clear()

Note :

a. Only strings can be stored

b. Temporary storage is equivalent to storing in memory when the page is closed and the data is gone

c. Scope: only the current page or the page that jumps through the current page

the code

        //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()
        }

The basic grammar is the ones above

If you want to store other types of values in local storage, you can use JSON format

JSON Quick Start and Syntax

json:javascript object notation js object notation

In fact, it is a data format that is essentially a string

Attribute names must be enclosed in double quotes

Convert json data into js object	js object into json data
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);

Use JSON to solve the problem of storing objects

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

over

localStorage and sessionStorage local storage and JSON quick start

localStorage syntax:

sessionStore syntax:

JSON Quick Start and Syntax

Guess you like