浏览器的本地存储（localStorage、sessionStorage）

已于 2022-11-16 14:02:37 修改
阅读量707 收藏
点赞数
分类专栏： vue 文章标签： vue.js
于 2022-05-09 23:09:42 首次发布
原文链接：https://www.bilibili.com/video/BV1Zy4y1K7SH?p=96&spm_id_from=pageDriver
版权

浏览器的本地存储

localStorage

在这里插入图片描述
存一个数据。
在这里插入图片描述
储存的都是字符串。
在这里插入图片描述
将对象修饰一下，让我们能看到对象的内容。JSON.stringify。
在这里插入图片描述
读取一个数据。
在这里插入图片描述
移除一个数据。
在这里插入图片描述
清空所有的数据。
在这里插入图片描述
自己删除，或者清除缓存的时候就不会存在。

sessionStorage

关闭浏览器重新打开以后就会没有。

总结

在这里插入图片描述

Serena_tz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
谷歌浏览器清缓存会把localStorage和sessionStorage都清空
我爱美女S的博客
03-14 1353
谷歌浏览器清缓存会把localStorage和sessionStorage都清空
HTML5 本地缓存 webStorage sessionStorage localStorage
Cindy
11-03 645
webStorage是HTML5本地缓存，大家都听过cookie本地缓存，那为什么不用cookie而引用webStorage呢？cookie的缺点：1、数据大小：作为存储容器，cookie 的大小限制在4KB左右，对于现在复杂的业务需求时4KB的容量远远不够，它只配置一下简简单单的信息，对于大部分开发者来说满足不了更多的需求。2、安全性问题：由于在HTTP请求中的cookie是明文传递的，带来的安...
Html 5 网络存储之 LocalStorage，SessionStorage，Cookie
蚩尤后裔-汪茂雄
06-26 2853
目录 网络存储 简述 localStorage 本地存储 增删改查操作 JSON 转换 浏览器清理缓存 SessionStorage 会话存储 SessionStorage 操作 网络存储 简述 1、HTML 中，为了在本机存储用户数据，通常使用 JavaScript cookie。HTML 5 开始引入了 Web 存储，网站利用它在本机上存储用户数据。 2、cookie中每条...
浏览器本地存储的四种方式
热爱前端的大三在校生
10-25 7078
localStorage的存储都是字符串，如果是存储对象，那么在存储时就需要调用JSON的stringify方法，并且在取值时用JSON.parse来解析成对象。来进行存储，但是当数据量较大，或符合一定的规范时，我们可以使用indexedDB数据库来进行数据的存储，indexedDB数据库存储理论上没有大小的限制。HTTP是一个无状态的协议，客户端向服务器发送请求，服务器返回响应，但是下一次发送请求时服务端就无法识别客户端的身份信息，故而产生了Cookie。
前端浏览器缓存localStorage和sessionStorage
weixin_45096939的博客
09-30 1252
理论上来说是永久有效的，即不主动清空的话就不会消失，即使保存的数据超出了浏览器所规定的大小，也不会把旧数据清空而只会报错。1.xxxxxStorage.setItem('key' , 'value')该方法接受一个键和值作为参数，会把键值添加到存储中，如果键名存在，则更新其对应的值；都是不可靠的，可能会因为各种原因（比如说退出App、网络切换、内存不足等原因）被清空。的生存期太短，因此应用场景很有限，但从另一方面来看，不容易出现异常情况，比较可靠。，只要关闭浏览器（也包括浏览器的标签页），就会被清空。
一文读懂浏览器本地存储：Web Storage
zhuanzhuantech的博客
08-01 2326
希望通过此篇文章，可以让大家了解 Web Storage 在浏览器数据存储和读取的相关操作，以及相关事件和限制。
浏览器的本地存储
qq_44875230的博客
02-12 1549
浏览器的本地存储及其API
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
10-19
cookie，localStorage和sessionStorage都是浏览器本地存储数据的地方,其用法不尽相同，今天小编通过本文给大家分享jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法，需要的朋友参考下吧
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
01-21
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的，区别在于 sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存。我们这里以 localStorage 为例，简要介绍下 ...
cookie，localStorage,sessionStorage区别与应用
01-07
sessionStorage 概念 存放在客户端的一段文本信息 存储在客户端的临时信息，只能存放字符串类型数据 同localStorage 大小 4k 5M 5M 生命周期 浏览器关闭，数据清空 存在内存中，除非自己删除 浏览器关闭，...
Cookie localStorage sessionStorage区别和使用
01-07
Cookie是什么：指某些网站存储在用户本地终端的数据 作用理解：登陆一个网站，保存了数据，近期不用再登录 应用层面来说：cookie是一段字符串； js层面来说：cookie是document对象下的一个String类型的属性 查看...
40.本地存储
potato123232的博客
09-01 2378
本地存储可以把数据存在浏览器中，减少用户与服务器的交互有sessionStorage与localStorage两种方式可以本地存储数据，sessionStorage容量约5M，localStorage容量约20M本地存储只能存储字符串，可以将对象JSON.stringify()编码后存储。...
浏览器存储（localStorage和sessionStorage）
qq_64210892的博客
11-11 1302
浏览器的两种内地存储方式
a标签新开页面sessionStorage丢失
zrr_520的博客
05-16 722
a标签新开页面sessionStorage丢失 场景 点击标签，新开一个页面 遇到的问题 打开新页面后重新跳转了登录页，查看后发现session空了 分析 cookie： 同浏览器，不同tab，同源，同路径 localStorage： 同浏览器，不同tab，同源 sessionStorage 同浏览器，同tab，同源 解决 <a target="_blank" href="www.xxx.com" rel="opener"></a> ...
JavaScript有关本地存储数据格式讲解
m0_56375200的博客
06-04 497
1. 本地存储数据格式：本地存储里面只能存储字符串的数据格式。 存储时如果数据是数组对象需转换为字符串数据格式再进行存储： 方法： JSON.stringify(); 把原先存储的数据赋值给一个新的数据对象 localStorage.setItem("存储", 待存储); 声明saveData（）函数进行封装 读取时再把字符串数据格式转换为数组对象格式： 方法： JSON....
面试题更新之-本地存储是什么？
肥晨开发的学习之路
07-13 834
与localStorage相似，sessionStorage也允许开发者在用户的本地浏览器中存储键值对数据，但与localStorage不同的是，sessionStorage中的数据仅在当前会话（session）期间有效。需要注意的是，localStorage中存储的数据是持久化的，即使用户关闭浏览器或重新启动计算机，存储的数据仍然存在。它们通常用于跟踪和识别用户，并存储少量数据。如果在新的窗口或标签页中打开网页，sessionStorage将会是全新的、空的状态，无法访问之前窗口或标签页中存储的数据。
浏览器本地存储
ganle的博客
03-07 1702
总结：浏览器本地存储分为 —— cookie Web Storage （localStorage、sessionStorage） indexedDB 【tips】WebSQL属于关系型数据库，目前未列入html标准中，只有chrome、Safari等部分webkit浏览器支持，其他浏览器均不支持，IE11仅部分支持IndexedDB数据库。 （1）cookie ## 会话（Session）跟踪： 会话，指用户登录网站后的一系列动作，比如浏览商品添加到购物车并购买。会话跟踪是Web程序中常用的技术
[Vue-常见错误]浏览器显示Uncaught runtime errors
最新发布
一个喜欢什么都研究一下的小小后端程序员
06-09 303
在vue.config.js中配置关闭Uncaught runtime errors显示。
本地数据存储 localStorage sessionStorage
06-01
在 Web 应用程序中，我们经常需要在浏览器中保存一些数据，以便在下一次访问应用程序时可以直接读取这些数据。为了实现这个功能，Web 浏览器提供了两种本地数据存储方式：`localStorage` 和 `sessionStorage`。 `localStorage` 和 `sessionStorage` 都是浏览器提供的 JavaScript API，可以用来在浏览器中保存和读取数据。它们的主要区别在于数据的生命周期和作用域。 `localStorage` 中保存的数据是永久性的，除非用户手动清除，否则数据将一直保存在浏览器中。而 `sessionStorage` 中保存的数据只在当前会话中有效，当用户关闭浏览器窗口或标签页时，数据将被删除。 另外，`localStorage` 中保存的数据可以在不同的窗口或标签页中共享，而 `sessionStorage` 中保存的数据只能在同一个窗口或标签页中共享。 在 JavaScript 中，我们可以使用以下代码来读取和保存数据到本地存储中： ``` // 保存数据到 localStorage 中 localStorage.setItem('key', 'value') // 从 localStorage 中读取数据 const value = localStorage.getItem('key') // 从 localStorage 中删除数据 localStorage.removeItem('key') // 清空 localStorage 中的所有数据 localStorage.clear() ``` 类似地，我们可以使用 `sessionStorage` 来读取和保存数据： ``` // 保存数据到 sessionStorage 中 sessionStorage.setItem('key', 'value') // 从 sessionStorage 中读取数据 const value = sessionStorage.getItem('key') // 从 sessionStorage 中删除数据 sessionStorage.removeItem('key') // 清空 sessionStorage 中的所有数据 sessionStorage.clear() ``` 需要注意的是，`localStorage` 和 `sessionStorage` 中只能保存字符串类型的数据，如果需要保存其他类型的数据，需要先将其转换为字符串类型。例如，我们可以使用 `JSON.stringify` 方法将 JavaScript 对象转换为字符串，然后再保存到本地存储中。在读取数据时，需要使用 `JSON.parse` 方法将字符串转换为 JavaScript 对象。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值