浏览器本地存储webStroage

最新推荐文章于 2024-10-17 22:28:27 发布

_洋

最新推荐文章于 2024-10-17 22:28:27 发布

阅读量275

点赞数

分类专栏： vue2+vue3 文章标签： localStorage sessionStorage Web存储数据持久化 JSON.stringify

本文链接：https://blog.youkuaiyun.com/mantou_riji/article/details/125888470

版权

vue2+vue3 专栏收录该内容

51 篇文章

订阅专栏

本文详细介绍了Web存储中的localStorage和sessionStorage，包括它们的区别、使用方法及数据操作。localStorage数据持久化，即使关闭浏览器也不会消失，需要手动删除；sessionStorage数据仅在当前会话有效，浏览器关闭后数据消失。两者都支持设置、获取、删除和清空数据的操作，且存储的数据都是字符串类型，对象需转换为JSON。此外，文中还提及了WebStorage的存储限制和查看方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

localStorage本地存储

localStroage的数据需要手动删除，即使关闭浏览器数据也不会消失，你什么时候删，数据什么时候消失
手动删除：如清空缓存

localStorage的4个操作：存储数据、获取数据、删除数据、清空数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h2>localStorage</h2>
    <button onclick="saveData()">点我保存一个数据</button>
    <button onclick="readData()">点我读取一个数据</button>
    <button onclick="deleteData()">点我删除一个数据</button>
    <button onclick="deleteAllData()">点我清空所有数据</button>


    <script type='text/javascript'>
    function saveData (){
        // localStorage中存储的键和值都是字符串类型，
        // 即使传入的是number类型，也会转为字符串类型,默认调用toString方法
        // 所以如果想要传递对象可以调用JSON.stringify方法，将对象转换为json字符串（json字符串可以显示对象内容，但本质也是一个字符串）

        const p ={id:"123",name:'yang',age:18}
        localStorage.setItem('msg','hello')
        localStorage.setItem('hello',123)
        localStorage.setItem('person',JSON.stringify(p))
    }
    function readData (){
        console.log(localStorage.getItem('msg'))
        console.log(localStorage.getItem('hello'))
        // JSON.parse(null) 的结果依然是 null
        console.log(JSON.parse(localStorage.getItem('person')))        
    }
    function deleteData (){
        localStorage.removeItem('msg')

    }
    function deleteAllData (){
        localStorage.clear()
    }

    </script>
</body>
</html>

localStorage数据查看：
在这里插入图片描述

sessionStorage

sessionStorage中的数据浏览器一关闭就没有了
sessionStorage的4个操作：存储数据、获取数据、删除数据、清空数据（和localStroage一样）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h2>sessionStorage</h2>
    <button onclick="saveData()">点我保存一个数据</button>
    <button onclick="readData()">点我读取一个数据</button>
    <button onclick="deleteData()">点我删除一个数据</button>
    <button onclick="deleteAllData()">点我清空所有数据</button>


    <script type='text/javascript'>
    function saveData (){
        // sessionStorage中存储的键和值都是字符串类型，
        // 即使传入的是number类型，也会转为字符串类型,默认调用toString方法
        // 所以如果想要传递对象可以调用JSON.stringify方法，将对象转换为json字符串（json字符串可以显示对象内容，但本质也是一个字符串）

        const p ={id:"123",name:'yang',age:18}
        sessionStorage.setItem('msg','hello')
        sessionStorage.setItem('hello',123)
        sessionStorage.setItem('person',JSON.stringify(p))
    }
    function readData (){
        console.log(sessionStorage.getItem('msg'))
        console.log(sessionStorage.getItem('hello'))
        // JSON.parse(null) 的结果依然是 null
        console.log(JSON.parse(sessionStorage.getItem('person')))        
    }
    function deleteData (){
        sessionStorage.removeItem('msg')

    }
    function deleteAllData (){
        sessionStorage.clear()
    }

    </script>
</body>
</html>