浏览器本地存储

最新推荐文章于 2024-05-19 14:15:00 发布
最新推荐文章于 2024-05-19 14:15:00 发布
阅读量478 收藏
点赞数 1
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44868492/article/details/121437461
版权

1. localStorage 浏览器的本地存储

关闭浏览器数据也不会消失
① 存储数据： localStorage.setItem(‘name’, ‘jack’)
② 读取数据： localStorage.getItem(‘name’)
③ 移除一个数据： localStorage.removeItem(‘name’)
④ 清空数据: localStorage.clear()

<!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 id="btn">点击存储数据</button>
  <button id="btn1">点击读取数据</button>
  <button id="btn2">点击删除数据</button>
  <button id="btn3">点击清空数据</button>
  <script>
    let p = { name: '张三', age: 18 }
    let btn = document.querySelector('#btn');
    let btn1 = document.querySelector('#btn1')
    let btn2 = document.querySelector('#btn2')
    let btn3 = document.querySelector('#btn3')
    // 1. 存储数据
    btn.addEventListener("click", function() {
      localStorage.setItem('click', 'hello');
      localStorage.setItem('number', 666)
      // JSON.stringify(p) 可以把一个对象转换为字符串 并且体现里面的内容
      localStorage.setItem('name', JSON.stringify(p))
    })
    // 2. 读取数据
    btn1.addEventListener("click", function() {
      console.log(localStorage.getItem('click'))
      console.log(localStorage.getItem('number'))
      console.log(localStorage.getItem('name'))
      const result = localStorage.getItem('name');
      // 解析结果
      console.log(JSON.parse(result))
    })
    // 3. 删除数据
    btn2.addEventListener('click', function() {
      localStorage.removeItem('click')
    })
    // 4. 清空数据
    btn3.addEventListener('click', function() {
      localStorage.clear()
    })
  </script>
</body>
</html>

2 . sessionStorage

关闭浏览器数据就会消失
① 存储数据： sessionStorage.setItem(‘name’, ‘jack’)
② 读取数据： sessionStorage.getItem(‘name’)
③ 移除一个数据： sessionStorage.removeItem(‘name’)
④ 清空数据: sessionStorage.clear()

<!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>sessionStorage</h2>
  <button id="btn">点击存储数据</button>
  <button id="btn1">点击读取数据</button>
  <button id="btn2">点击删除数据</button>
  <button id="btn3">点击清空数据</button>
  <script>
    let p = { name: '张三', age: 18 }
    let btn = document.querySelector('#btn');
    let btn1 = document.querySelector('#btn1')
    let btn2 = document.querySelector('#btn2')
    let btn3 = document.querySelector('#btn3')
    // 1. 存储数据
    btn.addEventListener("click", function() {
      sessionStorage.setItem('click', 'hello');
      sessionStorage.setItem('number', 666)
      // JSON.stringify(p) 可以把一个对象转换为字符串 并且体现里面的内容
      sessionStorage.setItem('name', JSON.stringify(p))
    })
    // 2. 读取数据
    btn1.addEventListener("click", function() {
      console.log(sessionStorage.getItem('click'))
      console.log(sessionStorage.getItem('number'))
      console.log(sessionStorage.getItem('name'))
      const result = sessionStorage.getItem('name');
      // 解析结果
      console.log(JSON.parse(result))
    })
    // 3. 删除数据
    btn2.addEventListener('click', function() {
      sessionStorage.removeItem('click')
    })
    // 4. 清空数据
    btn3.addEventListener('click', function() {
      sessionStorage.clear()
    })
  </script>
</body>
</html>
编程老菜鸡
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
10-19
在Web开发中，数据存储是不可或缺的一部分，jQuery提供了一些便捷的方法来访问和操作浏览器的本地存储，包括cookie、localStorage和sessionStorage。这三个机制都用于在客户端存储数据，但它们各有特点和适用场景。 ...
关闭浏览器后清除localStorage的内容
weixin_46600931的博客
05-18 2651
因此，在关闭浏览器或标签页后，sessionStorage 中的内容会自动清除，无需编写额外的代码。在关闭浏览器之后清除localStorage的内容是不可能的，因为JavaScript无法在浏览器关闭之后继续执行。但是，我们可以在下一次浏览器打开时，检查是否有标记表明上次是浏览器关闭，如果有，则清除localStorage的内容。然后，在下次启动应用程序时，检查该标记，并根据需要清除localStorage。这样，在关闭浏览器后，下次打开应用程序时，localStorage中的内容将被清除。
三种浏览器存储方案，你还担心数据无处放吗
hello ice cream
01-22 1100
webStorage、indexedDB、cookie
sessionStorage、cookie、localStorage生命周期区别
CodePrincess的博客
02-12 563
从生命周期和用途区分 localstorage sessionStorage cookie从生命周期来看，localstorage 被存储到硬盘上，关闭浏览器不会清除 ， cookie 不设置过期时间，关闭浏览器，cookie存储的数据会被清除，cookie会被请求头传给服务器，sessionStorage和localstorage同属于浏览器本地存储，但关闭浏览器时,sessionStorage存储的数据 会被清除。
关于localStorage
tansy_big_rabbit的博客
01-05 253
localStorage 和 sessionStorage 的区别 本地离线存储 localStorage 长期存储数据，浏览器关闭数据不丢失，而 sessionStorage 在浏览器关闭之后会自动清除数据。 cookies 和 localStorage、sessionStorage 的区别 cookies 是在浏览器和服务器之间来回传递，其余两种不会。localStorage 和 ses
谷歌浏览器怎么清除浏览器缓存以及本地缓存localstorage。
热门推荐
海贼王某人的博客
09-10 2万+
清除浏览器缓存很容易首先点击右上角的小点打开设置选项，进入后找到打开清除浏览记录点进去，如下图： 然后把三个都勾上，清除数据，再打开你需要查看的网页就可以了，就不会存在历史缓存和记录了。 清除本地缓存的话看下面，一般本地缓存有两种一个是手动清除一个是关闭页面就会清除，今天就说一下localstorage怎么清除吧，先按f12键，打开调试器，或者鼠标反键点击选项检查也可以，进入后看下图，找一下1号词，如果找不到·，点击2好标记，打开后就可以找到，然后点击三号词localstorage，这里面就是所有的缓存
浏览器本地存储方案
最新发布
Runnymmede的博客
05-19 779
浏览器本地存储方案可以分为三个方面，分别为CookieIndexedDB。
浏览器原理---浏览器本地存储
sinat_34896766的博客
04-30 1063
Cookie是最早被提出来的本地存储方式，在此之前，服务端是无法判断网络中的两个请求是否是同一用户发起的，为解决这个问题，Cookie就出现了。SessionStorage和LocalStorage都是在HTML5才提出来的存储方案，SessionStorage 主要用于临时保存同一窗口(或标签页)的数据，刷新页面时不会删除，关闭窗口或标签页之后将会删除这些数据。LocalStorage是HTML5新引入的特性，由于有的时候我们存储的信息较大，Cookie就不能满足我们的需求。b、Cookie无法跨域。
一文读懂浏览器本地存储：Web Storage
zhuanzhuantech的博客
08-01 2586
希望通过此篇文章，可以让大家了解 Web Storage 在浏览器数据存储和读取的相关操作，以及相关事件和限制。
js浏览器本地存储store.js介绍及应用
10-25
store.js 是一个兼容所有浏览器的 LocalStorage 包装器，不需要借助 Cookie 或者 Flash。store.js 即可实现本地存储功能
BrowserStorage浏览器本地存储封装
08-12
BrowserStorage是针对HTML5引入的各种浏览器本地存储机制的一种封装库，旨在提供统一的API接口，以便开发者更加便捷地管理和操作这些存储方式。HTML5的本地存储主要包括Cookie、localStorage和sessionStorage，它们...
web基于浏览器的本地存储方法应用
09-05
因此，浏览器开始引入新的本地存储方法，以满足更丰富的数据存储需求。 HTML5引入了两种主要的本地存储解决方案：`localStorage` 和 `sessionStorage`。`localStorage` 是一种持久化的存储方式，数据可以在用户关闭...
跨浏览器的本地存储 Ⅰ
09-22
原文：http://www.planabc.net/2008/08/05/userdata_behavior/现在最流行的本地存储莫过于 cookie 的应用，但 浏览器对cookie有很多限制，最大的限制在于其对cookie 总大小，仅为 4K 左右（包括名（name）、值...
LocalStorage浏览器本地存储使用案例( Echart 矩形数图 )
03-02
在"LocalStorage浏览器本地存储使用案例"中，我们将探讨如何利用LocalStorage来存储和读取数据，并结合Echart库创建可视化图表。 Echarts是一款基于JavaScript的数据可视化库，它提供了丰富的图表类型，如堆叠柱状...
simpan.js:窗口浏览器本地存储API
05-02
simpan.js 窗口浏览器本地存储API simpan.js是window.localStorage API。 HTML5规范允许localStorage仅接受String作为Object属性的值，Simpan可以存储整个JavaScript Object。存储和对象参数Simpan允许您自动存储...
Redux-LocalStorage:在浏览器本地存储中存储状态
05-10
Redux本地存储 功能易于实现。 安装 npm install redux-simple-localstorage1 用法 import { applyMiddleware , compose , createStore } from "redux" import reducer from './reducers/index.js' import logger ...
angular-local-storage-:使用浏览器本地存储的简单 AngularJS 方法
06-24
当涉及到在用户关闭或刷新浏览器后仍然保留数据时，浏览器的本地存储（Local Storage）成为一个重要的工具。`angular-local-storage` 是一个 AngularJS 的插件，它为开发者提供了一种方便的方式来操作本地存储。 **...
js查看浏览器本地存储
07-28
你可以使用JavaScript的`localStorage`对象来查看浏览器的本地存储。`localStorage`提供了一种简单的键值对存储方式，可以在浏览器的会话期间持久化保存数据。 要查看本地存储中的数据，你可以使用以下代码： ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值