The browser implements the local storage mechanism through the Window.sessionStorage and Window.localStorage properties.

The APIs of sessionStorage and localStorage are the same:

localStorage(或sessionStorage).setItem('key','value')

localStorage(或sessionStorage).getItem('key')

localStorage(或sessionStorage).removeItem('key')

localStorage(或sessionStorage).clear()

code example

HTML structure code:

    <button onclick="saveData()">点我保存数据</button>
    <button onclick="readData()">点我读取数据</button>
    <button onclick="deleteData()">点我删除数据</button>
    <button onclick="deleteAllData()">点我清空数据</button>

script code:

    <script>
        let person = {
            name: 'Mary',
            age: 18
        }

        function saveData() {
            //该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
            localStorage.setItem('msg1', 'hello!!!')
            localStorage.setItem('msg2', '我成功了')
            localStorage.setItem('msg3', '哈哈哈666')
            localStorage.setItem('person', JSON.stringify(person))
        }

        function readData() {
            //该方法接受一个键名作为参数，返回键名对应的值。
            console.log(localStorage.getItem('msg1'));
            console.log(localStorage.getItem('msg2'));
            console.log(localStorage.getItem('msg3'));
            const result = localStorage.getItem('person');
            //返回字符串
            console.log(result);
            //返回对象
            console.log(JSON.parse(result));
        }

        function deleteData() {
            //该方法接受一个键名作为参数，并把该键名从存储中删除。
            localStorage.removeItem('msg2')
        }

        function deleteAllData() {
            //该方法会清空存储中的所有数据。
            localStorage.clear()
        }
    </script>

Show results:

Summarize

1. The storage content size generally supports about 5MB (the default storage is a string)

2. The browser implements the local storage mechanism through the Window.sessionStorage and Window.localStorage properties.

3. Related APIs:
1. xxxStorage.setItem('key', 'value');
This method accepts a key and value as parameters, and will add the key-value pair to the storage. If the key name exists, update its corresponding value.

2. xxxStorage.getItem('person'); This method accepts a key name as a parameter and returns the value corresponding to the key name.

3. xxxStorage.removeItem('key'); This method accepts a key name as a parameter, and deletes the key name from the storage.

4. xxxStorage.clear(); This method will clear all data in the storage.

4. Remarks:
1. The content stored in SessionStorage will disappear when the browser window is closed.
2. The content stored in LocalStorage needs to be manually cleared before it disappears.
3. xxxStorage.getItem(xxx) If the value corresponding to xxx cannot be obtained, then the return value of getItem is null.
4. The result of JSON.parse(null) is still null.

webStorage local storage

Summarize

Guess you like