VUE3.0,DAY50，浏览器本地存储与会话存储

最新推荐文章于 2024-04-01 09:38:02 发布

疯子的梦想＠

最新推荐文章于 2024-04-01 09:38:02 发布

阅读量1.4k

点赞数

分类专栏：前端文章标签： html5 javascript html

本文链接：https://blog.csdn.net/weixin_48681463/article/details/120225193

版权

前端专栏收录该内容

110 篇文章 4 订阅

订阅专栏

VUE3.0,DAY50

本地存储的位置
会话存储
总结

本地存储的位置

打开一个浏览器，按F12，找到应用程序或者Application就会看到存储的东西了。
在这里插入图片描述
可以看到存储的形式是key：value键值对的形式

往网页的本地存储写入一个数据

我们写一个按钮，点击按钮，就在网页的本地存储内写入一个数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>localStorages</title>
</head>

<body>
	//onclick点击事件
    <button onclick="saveData()">点我保存一个数据</button>
    <script type="text/javascript">
        function saveData() {
            //往localstorage中写入数据
            localStorage.setItem('msg','哈哈')
        }
    </script>
</body>

</html>

输出如下，我们看到，确实是存入了我们希望写入的一个数据“哈哈”。注意：key和value都应该是字符串，即带’'引号的。
在这里插入图片描述

点击操作本地存储中的数据

点击读取存储的信息，点击删除存储的信息

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>localStorages</title>
</head>

<body>
    <button onclick="saveData()">点我保存一个数据</button>
    <button onclick="readData()">点我读取一个数据</button>
    <button onclick="deleteData()">点我删除一个数据</button>
    <script type="text/javascript">
        function saveData() {
            //往localstorage中写入数据
            localStorage.setItem('msg', '哈哈')
        }
        function readData() {
            const result = localStorage.getItem('msg')
            console.log(result);
        }
        function deleteData() {
            //删除本地存储中的数据
            localStorage.removeItem('msg')
        }
    </script>
</body>

</html>

可以看到我们点击读取，读出了一个“哈哈”，点击删除，存储库里边的数据没有了。
在这里插入图片描述

清空所有数据

先点击保存进一个数据后，在点击清空所有数据，就会发现存储库内的数据无差别的都消失了。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>localStorages</title>
</head>

<body>
    <button onclick="saveData()">点我保存一个数据</button>
    <button onclick="readData()">点我读取一个数据</button>
    <button onclick="deleteData()">点我删除一个数据</button>
    <button onclick="deleteAllData()">点我清空全部数据</button>
    <script type="text/javascript">
        function saveData() {
            //往localstorage中写入数据
            localStorage.setItem('msg', '哈哈')
        }
        function readData() {
            const result = localStorage.getItem('msg')
            console.log(result);
        }
        function deleteData() {
            //删除本地存储中的数据
            localStorage.removeItem('msg')
        }
        function deleteAllData() {
            localStorage.clear()
        }
    </script>
</body>

</html>

在这里插入图片描述
注意：当要读取的东西，是存储库内没有的东西时，会返回一个空值null。

会话存储

会话存储就是浏览器一关闭，数据就消失了。
我们同样使用以下代码，进行浏览器会话存储的一些操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sessionStorage</title>
</head>

<body>
    <button onclick="saveData()">点我保存一个数据</button>
    <button onclick="readData()">点我读取一个数据</button>
    <button onclick="deleteData()">点我删除一个数据</button>
    <button onclick="deleteAllData()">点我清空全部数据</button>
    <script type="text/javascript">
        function saveData() {
            //往sessionStorage中写入数据
            sessionStorage.setItem('msg', '哈哈')
        }
        function readData() {
            const result = sessionStorage.getItem('msg')
            console.log(result);
        }
        function deleteData() {
            //删除本地存储中的数据
            sessionStorage.removeItem('msg')
        }
        function deleteAllData() {
            sessionStorage.clear()
        }
    </script>
</body>

</html>

总结

在这里插入图片描述

疯子的梦想＠

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VUE3.0,DAY50，浏览器本地存储与会话存储

VUE3.0,DAY50本地存储的位置往网页的本地存储写入一个数据点击操作本地存储中的数据清空所有数据会话存储总结本地存储的位置打开一个浏览器，按F12，找到应用程序或者Application就会看到存储的东西了。可以看到存储的形式是key：value键值对的形式往网页的本地存储写入一个数据我们写一个按钮，点击按钮，就在网页的本地存储内写入一个数据<!DOCTYPE html><html lang="en"><head> <meta c
复制链接

扫一扫