Javascript - 浏览器本地存储

最新推荐文章于 2024-04-04 10:23:43 发布

学习中的小菜鸟.

最新推荐文章于 2024-04-04 10:23:43 发布

阅读量1.1k

点赞数

分类专栏： Vue JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_33962481/article/details/122039039

版权

JavaScript 同时被 2 个专栏收录

66 篇文章 1 订阅

订阅专栏

Vue

48 篇文章 2 订阅

订阅专栏

文章目录

一、什么是浏览器本地存储
二、怎么实现浏览器本地存储
- 读取本地存储的数据
- 删除本地存储的数据
三、sessionStorage

一、什么是浏览器本地存储

在这里插入图片描述
比如上面的搜索历史记录, 就保存在浏览器本地存储里面

二、怎么实现浏览器本地存储

在window身上有一个localStorage属性, 这个属性有一个setItem方法, 接收两个参数,一个key,一个value.
注意 : 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>Document</title>
</head>
<body>
  <h2>localStorage</h2>
  <button onclick="saveData()">点我保存一个数据</button>

  <script>
    function saveData(){
      window.localStorage.setItem("msg", "123")
    }
  </script>
</body>
</html>

在这里插入图片描述

读取本地存储的数据

使用localStorage.getItem()可以读取一条数据

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

  <script>
    function showData() {
      console.log(localStorage.getItem('msg'));
    }
  </script>

</body>

删除本地存储的数据

使用localStorage.removeItem()可以读取一条数据

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


  <script>
    function removeData() {
      localStorage.removeItem('msg')
    }
  </script>

</body>

三、sessionStorage

sessionStorage上面的api和localStorage是一样的.
他俩的区别就是关闭浏览器后, localStorage的数据还存在, sessionStorage的数据就会消失

学习中的小菜鸟.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Javascript - 浏览器本地存储

文章目录一、什么是浏览器本地存储二、怎么实现浏览器本地存储读取本地存储的数据删除本地存储的数据三、sessionStorage一、什么是浏览器本地存储比如上面的搜索历史记录, 就保存在浏览器本地存储里面二、怎么实现浏览器本地存储在window身上有一个localStorage属性, 这个属性有一个setItem方法, 接收两个参数,一个key,一个value.注意 : key和value必须都是字符串<!DOCTYPE html><html lang="en"&gt
复制链接

扫一扫