浏览器本地存储

最新推荐文章于 2023-02-14 01:36:53 发布

HeX_7

最新推荐文章于 2023-02-14 01:36:53 发布

阅读量247

点赞数 1

分类专栏： # Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/hex_7/article/details/124991272

版权

Vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

webStorage

1.存储内容大小-般支持5MB左右(不同浏览器可能还不-样)

2.浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制)

3.相关API:

1. xxxxStorage . setItem('key', 'value');

该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

2. xxxxStorage. getItem(' person');

该方法接受一个键名作为参数，返回键名对应的值。

3. xxxxStorage . removeItem('key');

该方法接受一个键名作为参数，并把该键名从存储中删除。

4. xxxxStorage . clear()

该方法会清空存储中的所有数据。

4.备注:

1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。

2. LocalStorage存储的内容,需要手动清除才会消失。

3. xxxxStorage. getItem(xx)如果xxx对应的value获取不到，那么getItem的返回值是null.

4. JSON.parse(null)的结果依然是null。

localStorage

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

    <script>

        let p = {name:'张三',age:18}

        function saveData(){
            localStorage.setItem('msg','hello!')
            localStorage.setItem('msg2',336)
            localStorage.setItem('person',JSON.stringify(p))
        }
        function readData(){
            console.log(localStorage.getItem('msg'));
            console.log(localStorage.getItem('msg2'));

            const result = localStorage.getItem('person')
            console.log(JSON.parse(result));

            console.log(localStorage.getItem('msg3'));

        }
        function deleteData(){
            localStorage.removeItem('msg2')
        }
        function deleteAllData(){
            localStorage.clear()
        }
    </script>
</body>

sessionStorage

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

    <script>

        let p = {name:'张三',age:18}

        function saveData(){
            sessionStorage.setItem('msg','hello!')
            sessionStorage.setItem('msg2',336)
            sessionStorage.setItem('person',JSON.stringify(p))
        }
        function readData(){
            console.log(sessionStorage.getItem('msg'));
            console.log(sessionStorage.getItem('msg2'));

            const result = sessionStorage.getItem('person')
            console.log(JSON.parse(result));

            // console.log(sessionStorage.getItem('msg3'));

        }
        function deleteData(){
            sessionStorage.removeItem('msg2')
        }
        function deleteAllData(){
            sessionStorage.clear()
        }
    </script>
</body>