Vue学习：sessionStrage本地存储

¡Venceremo

已于 2023-02-24 10:17:32 修改

阅读量346

点赞数

分类专栏： Vue 文章标签： vue.js Powered by 金山文档

于 2023-02-24 10:17:20 首次发布

本文链接：https://blog.csdn.net/weixin_47295886/article/details/129194934

版权

Vue 专栏收录该内容

155 篇文章 1 订阅

订阅专栏

本文介绍了如何使用sessionStorage和localStorage进行浏览器本地数据存储，包括保存、读取、删除数据的操作。sessionStorage在浏览器关闭后会清除，而localStorage的数据持久化，需手动清除。同时提到了相关API如setItem、getItem等，并展示了示例代码。

摘要由CSDN通过智能技术生成

sessionStrage：浏览器点击关闭就没了不保存

且loaclStrage上面的方法在sessionStrage也有

    <h2>sessionStrage</h2>
    <button onclick="saveData()">点我保存一个数据</button>
    <button onclick="readData()">点我读取一个数据</button>
    <button onclick="deleteData()">点我删除一个数据</button>
    <button onclick="deleteAllData()">点我删除所有数据</button>
    <script>
        let p={name:'z',age:20}
       // console.log(p.toString())
        function saveData(){
            //传递key value 都得是字符串 数值会转成字符串
            sessionStorage.setItem('msg','hello')
            sessionStorage.setItem('msg2',888)//数值会转成字符串
            sessionStorage.setItem('person',p)//不可以用体现不了内容 会toString()转成字符串
            sessionStorage.setItem('person',JSON.stringify(p))
          

        }
        function readData(){
            console.log(sessionStorage.getItem('msg'))
            console.log(sessionStorage.getItem('msg2'))
            console.log(sessionStorage.getItem('person'))//输出是json格式的需要解析一下
            const result=sessionStorage.getItem('person')
            console.log(JSON.parse(result))//转成对象格式
        }
        function deleteData(){
            sessionStorage.removeItem('msg')
        }
        function deleteAllData(){
            sessionStorage.clear()
        }
    </script>

sessionStrage 浏览器关闭会主动清空loaclStorage不会除非你使用了某些按键使用函数清空，或者