一分钟掌握本地缓存localstorage使用方法

在下月亮有何贵干

已于 2022-04-02 12:01:38 修改

阅读量1.1k

点赞数 5

分类专栏：一分钟学习一个前端小知识文章标签：缓存 js javascript 前端 bom

于 2021-08-25 17:06:07 首次发布

本文链接：https://blog.csdn.net/weixin_43877799/article/details/119915176

版权

一分钟学习一个前端小知识专栏收录该内容

15 篇文章 5 订阅

订阅专栏

没有目录直接正文

localstorage，如何使用呢，其实很简单

无论什么开发语言vue还是react都逃不开写js吧，js里面有个window用过吧

localstorage就在上面，然后他有两个方法，一个setItem一个getItem，一个设置值一个取值

window.localStorage.setItem("key","value")

现在我们就把一个value值存在浏览器里了，然后只要用

window.localStorage.getItem("key")

你就拿到一个值叫做"value"了

然后一般保存的时候我们都是保存对象而不是单独的值，而本地缓存只能保存字符串，所以我们要把对象用JSON.stringify()把对象改成字符串保存，然后取值的时候用JSON.parse()转回来

为什么我们要用它，因为它可以保存在你的浏览器作为记录，你关闭浏览器重新打开对应的页面，也可以获取到这个值，不需要网络。

试试直接来一个写个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>Document</title>
</head>
<style>
 
</style>
 
<body>
 
</body>
 
<script>
 
    window.localStorage.setItem('name', 'D-bzq')
 
</script>
 
</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>Document</title>
</head>
<style>
 
</style>
 
<body>
 
</body>
 
<script>
 
    const name = window.localStorage.getItem('name')
    alert(name)
</script>
 
</html>

在这里插入图片描述

在下月亮有何贵干

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
一分钟掌握本地缓存localstorage使用方法

没有目录直接正文localstorage，如何使用呢，其实很简单无论什么开发语言vue还是react都逃不开写js吧，js里面有个window用过吧localstorage就在上面，然后他有两个方法，一个setItem一个getItem，一个设置值一个取值window.localstorage.setItem("key","value")现在我们就把一个value值存在浏览器里了，然后只要用window.localstorage.getItem("key")你就拿到一个值叫做"value"
复制链接

扫一扫