HTML 本地存储 localStorage和sessionStorage

最新推荐文章于 2024-04-06 08:27:25 发布

结城明日奈是我老婆

最新推荐文章于 2024-04-06 08:27:25 发布

阅读量703

点赞数

分类专栏： # vue2 html学习专栏文章标签： html vue.js 前端

本文链接：https://blog.csdn.net/yasinawolaopo/article/details/122028483

版权

vue2 同时被 2 个专栏收录

80 篇文章 4 订阅

订阅专栏

html学习专栏

35 篇文章 0 订阅

订阅专栏

浏览器的本地存储

声明:这个不是Vue团队打造的，原本js里面就有这个功能,所以这个功能不是必须要写在.Vue文件里

localStorage

storage: 存储、保管

sessionStorage

什么叫浏览器的本地存储

比如是bilibili搜索一个刀剑神域把浏览器整个都关掉,搜索东西了，所以在打开这个浏览器打开bilibili再点搜索框，搜索历史里面出现了一个刀剑神域,这个刀剑神域存在哪了?

这个刀剑神域就是借助了浏览器的本地存储存到了你的硬盘上

借助浏览器的开发者工具就能查看

可以看Application(应用程序)有一个分类叫localStorage(本地存储)里面的网站都是bilibili(网站)的域名,如果打开Acfun再打开localStorage(本地存储)就是acfun往里面存的东西

Key | value

searchCache | [“刀剑神域”]

而且存的形式是k-v

往里面加数据["刀剑神域","野良神"]

往旁边空白处点击后再点击搜索框就可以出现

在应用程序里的上方有个X就是删除元素

数据就没了

这就是浏览器本地存储的应用:往你本地存储一些东西

那bilibili可以放，我们也可以放(记住VsCode调试的时候记得下载Live Server这个插件,用这个去调试)

写一个基础的结构

<!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>localStorage</title>
</head>
<body>
    
</body>
</html>

分别写四个按钮对里面的数据进行增删改查

保存数据

<h2>往localStorage存储</h2>
<button onclick="saveData()">点我保存一个数据</button>

创建js脚本,写一段代码就可以把你的数据存到你的localStorage当中

window身上有一个localStorage：window.localStorage因为是window身上所以可以简写为localStorage里面有个API叫setTtem():设置一个值(形式是键值对(k-v))

<script>
        function saveData(){
            localStorage.setItem('msg','hello!')
        }
    </script>

这样数据就能进去。注意的是这个key和value都是字符串

要是重复的值,它会替换
```
localStorage.setItem('msg','hello!!!')
```
要是不是字符串，它会把你的(如果是Number类型的666)数据给你转换成String类型
```
localStorage.setItem('h',666)
```

问题

如果我有一个人叫let p

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

把张三存进去

localStorage.setItem('person',p)

结果

person | [object Object]

一个对象调用toString方法，返回的就是这个

let p = {
    name: '张三',
	age: 18,
}
console.log(p.toString())

结果:

[object Object]

其实对象里面是什么已经不重要了，重要的是你是一个空对象也是这样

怎么调用toString

只要你第二个参数的value你给的不是String类型,它一定会帮你调toString

解决这个问题

JSON.stringify()

能把一个对象变成字符串形式，并且能体现出来里面的内容

localStorage.setItem('person',JSON.stringify(p))

结果

person | {"name":"张三","age":18}

其实它本质也是字符串

读取数据

<h2>往localStorage读取</h2>
<button onclick="readData()">点我读取一个数据</button>

读取一个

localStorage.getItem('msg'):它会给你一个返回值,输出一下返回值

function readData(){
	console.log(localStorage.getItem('msg')) 
}

解析一个对象(不是以字符串的形式呈现):

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

如果你读取出来的东西本地存储没有的东西，那么读取出来的是什么?

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

结果:

null

如果你读取一个不存在的对象时

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

result是null，JSON.parse(null)的结果:

null

删除数据

<h2>localStorage删除一个数据</h2>
<button onclick="deleteData()">点我删除一个数据</button>

删除一个数据

function deleteData(){
	localStorage.removeItem('msg')
}

其实还有一个API–清空

<h2>清空localStorage</h2>
<button onclick="clearData()">点我删除一个数据</button>

function clearData(){
	localStorage.clear()
}

localStroage就是以上这些

localStroage最大的特点是:你把浏览器关闭掉，它也不会消失

`localStorage`还有一个弟弟,叫`sessionStorage`,上面所有的`API`都跟它一模一样

也就是说sessionStorage也有`setItem、getItem、removeItem、clear

直接全选复制，修改localStroage为sessionStorage

<!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>
        <h2>往sessionStorage存储</h2>
        <button onclick="saveData()">点我保存一个数据</button>
        <hr />
        <h2>往sessionStorage读取</h2>
        <button onclick="readData()">点我读取一个数据</button>
        <hr />
        <h2>sessionStorage删除一个数据</h2>
        <button onclick="deleteData()">点我删除一个数据</button>
        <hr />
        <h2>清空localStorage</h2>
        <button onclick="clearData()">点我删除一个数据</button>
    </body>

    <script>
        let p = {
            name: '张三',
            age: 18,
        }
        console.log(p.toString())
        function saveData(){
            sessionStorage.setItem('msg','你好!!!')
            sessionStorage.setItem('h',666)
            sessionStorage.setItem('person',JSON.stringify(p))
        }
        function readData(){
            console.log(sessionStorage.getItem('msg')) 
            const result = sessionStorage.getItem('person')
            console.log(JSON.parse(result))
            console.log(sessionStorage.getItem('h')) 
        }
        function deleteData(){
            sessionStorage.removeItem('person')
        }
        function clearData(){
            sessionStorage.clear()
        }
    </script>
</html>