浏览器的本地存储

最新推荐文章于 2024-07-28 18:07:55 发布
最新推荐文章于 2024-07-28 18:07:55 发布
阅读量1k 收藏 1
点赞数
分类专栏： JavaScript 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43427995/article/details/128076191
版权
本文介绍了WebStorage的两种类型——localStorage和sessionStorage，它们为浏览器提供了本地存储功能。localStorage支持在浏览器关闭后仍能保留数据，而sessionStorage的数据会在浏览器窗口关闭时清除。文章详细讲解了localStorage的API，包括存储、获取、删除和清空数据的方法，并提及了sessionStorage与localStorage的相似用法。
摘要由CSDN通过智能技术生成

WebStorage

WebStorageb包括Window.localStorgae和Window.sessionStorage，浏览器端通过这两个属性来实现本地存储机制。

存储内容大小一般支持5MB左右（不同浏览器可能不同）

localStorage

打开浏览器控制台，在Application选项中有个Storage，可以在这里面找到localStorage

关闭浏览器localStorage也不会消失(需要手动清除)

localStorage最重要的是这几个API

  • 存储数据
    • localStorage.setItem(‘msg’,‘hello’)
  • 获取数据
    • localStorage.getItem(‘msg’)
  • 删除数据
    • localStorage.removeItem(‘msg’)
  • 清空数据
    • localStorage.clear()
<button onclick="addStorage()">添加一个数据</button>
    <button onclick="
最低0.47元/天 解锁文章
嘤嘤鸭
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
10-19
在Web开发中，数据存储是不可或缺的一部分，jQuery提供了一些便捷的方法来访问和操作浏览器的本地存储，包括cookie、localStorage和sessionStorage。这三个机制都用于在客户端存储数据，但它们各有特点和适用场景。 ...
vue使用localstorage超出限制解决方法
cm_xiaomo的博客
10-10 1850
但因为本次升级会影响到项目全局功能，范围较广，我可不敢这么干，所以换了个解决方案，不走vuex，直接使用localforage，把在内存大的数据直接存在localforage，这样影响范围只有当前模块，同时也能完美解决问题。最近在项目中，遇到一个报错，QuotaExceededError: The quota has been exceeded。因为localforage是异步操作，而vuex是同步操作，所以会有问题。
HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理
weixin_34082695的博客
05-22 994
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的，区别在于 sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存。我们这里以 localStorage 为例，简要介绍下 HTML5 的本地存储，并针对如遍历等常见问题作一些示例说明。 localStorage 是 HTML5 本地存储的 ...
浏览器本地存储详解、 cookie、sessionStorage、localStorage、IndexedDB
最新发布
liangzhenmeng的博客
07-28 4万+
服务器端可以使用 Set-Cookie 的响应头部来配置 cookie 信息。一条cookie 包括了5个属性值 expires、domain、path、secure、HttpOnly。其中 expires 指定了 cookie 失效的时间，domain 是域名、path是路径，domain 和 path 一起限制了 cookie 能够被哪些 url 访问。secure 规定了 cookie 只能在确保安全的情况下传输，HttpOnly 规定了这个 cookie 只能被服务器访问，不能使用 js 脚本访问。
localstorage存储大小_localstroage过多存储满的情况下应该怎么办？
weixin_39820588的博客
11-21 6035
技术很简单，业务很麻烦在大公司，同一个域名下可能存在几十上百条业务线，每条业务线都可能因为各种理由往 localStorage 里塞东西，跨页面传数据啦、缓存啦、离线化啦、性能优化啦...，5M 看起来很多，其实很快就用完了。而开发时基本无感知，是因为大家都只访问自己的业务，但用户会访问各种业务，时间一久，很容易就存满了，凡是严重依赖 localStorage 的业务流程都存在风险，写可能出问题，...
webStorage统称
weixin_51908141的博客
11-27 4547
浏览器的存储
html5多个图片位置_HTML5的5种存储方式详解
weixin_39523835的博客
11-22 614
引言本篇文章主要介绍了前端HTML5几种存储方式的总结 ，主要包括本地存储localstorage，本地存储sessionstorage，离线缓存(application cache)，Web SQL，IndexedDB。有兴趣的可以了解一下。正文开始~总体情况h5之前，存储主要是用cookies。cookies缺点有在请求头上带着数据，大小是4k之内。主Domain污染。主要应用：购物车、客户登...
js浏览器本地存储store.js介绍及应用
10-25
浏览器本地存储指的是网页浏览器为网页提供的存储空间，使得开发者能够保存和读取网站或应用的数据，以实现网站的离线访问、记录用户偏好设置等效果。传统上，常见的本地存储方式包括 Cookie、Web Storage...
BrowserStorage浏览器本地存储封装
08-12
BrowserStorage是针对HTML5引入的各种浏览器本地存储机制的一种封装库，旨在提供统一的API接口，以便开发者更加便捷地管理和操作这些存储方式。HTML5的本地存储主要包括Cookie、localStorage和sessionStorage，它们...
web基于浏览器的本地存储方法应用
09-05
因此，浏览器开始引入新的本地存储方法，以满足更丰富的数据存储需求。 HTML5引入了两种主要的本地存储解决方案：`localStorage` 和 `sessionStorage`。`localStorage` 是一种持久化的存储方式，数据可以在用户关闭...
localStorage容量太小？使用localforage进行大容量的存储
m0_51431448的博客
11-15 2352
localStorage是前端存储数据的一种方式，，但是其容量一般在5M-10M左右，用来缓存一些间的数据基本够用，但毕竟定位也不是大数据量的存储；浏览器其实有提供大数据量的本地存储的，比如： IndexedDB，IndexDB存储数据大小一般在250M以上，弥补了localStorage容量的缺陷，我们可以通过localforage来进行大数据量的本地存储，使用起来也很方便，其中的API和localStorage基本类似，几乎没有学习成本。
localStorage容量太小?试试它们
程序员成长指北
11-14 671
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群原文链接: https://juejin.cn/post/7163075131261059086作者：唐诗localStorage 是前端本地存储的一种，其容量一般在 5M-10M 左右，用来缓存一些简单的数据基本够用，毕竟定位也不是大数据量的存储。在某些场景下 localStorage 的容量就...
浏览器 内存限制: 256 Mb时间限制: 1000 ms
2023年最新地推相关信息
03-16 1818
浏览器 内存限制: 256 Mb时间限制: 1000 ms 题目描述 所有的网页浏览器都有访问、前进与后退按钮，它们的工作原理如下： 访问操作需要用户提供一个网址，浏览器将会访问该网址，并将该网址的前继设为跳转前的网址； 后退操作会检查当前网址是否有前继(除第一个网址外，每个网址都有前继)，如果有，浏览器将访问当前网址的前继； 前进是用于抵消后退的： 若前一步是后退，浏览器退回至后退前的网页。 ...
浏览器本地存储cookie、localStorage 与 sessionStorage
青颜的天空的博客
07-05 791
HTTP协议 http：超文本传输协议，无状态，同一个客户端的这次请求和上次请求没有对应关系。 https：超文本传输安全协议 对http服务器来说，它并不知道这两个请求来自同一个客户端，为了解决这个问题，Web程序引入了cookie机制来维护状态。 cookie是什么 cookie是浏览器提供的一种机制，可以由JavaScript对其进行操作(设置、读取、删除)，是一种会话跟踪技术，是存储于访问者计算机中的一小块数据 会话：用户进入网站，开始浏览信息到关闭浏览器的过程，就称之为是一次会话； 会话跟踪技
判断localstorage被禁用的处理_localStorage 多种使用方法
weixin_39683769的博客
01-26 1660
HTML5中 Web Storage 的出现，主要是为了弥补使用 Cookie 作为本地存储的不足。Cookie 存储的数据量非常小，而且数据会自动携带到请求头里，但服务器端可能并不关心这些数据，所以会造成带宽的浪费。Web Storage 提供了两个存储对象：localStorage 和 sessionStorage。sessionStorage 存储的数据仅在本次会话有用，会话结束后会自动失效...
一文读懂浏览器本地存储：Web Storage
zhuanzhuantech的博客
08-01 2921
希望通过此篇文章，可以让大家了解 Web Storage 在浏览器数据存储和读取的相关操作，以及相关事件和限制。
浏览器的存储
m0_59070120的博客
02-14 282
大小一般不超过4kb，其始终会在同源的http请求中自动携带，在设置有效期时间之前一直有效，浏览器的本地存储主要分为cookies，web storage，indexedDB。sessionstorage，页面关闭，数据就被删除（仅在当前会话下有效）键值对存储，异步（不会直接返回数据，而是一个callback），支持二进制存储。localstorage，除非主动删除，否则一直存在。大小可以达到5mb，只能存储字符串类型的数据。存储空间相对来说大很多，遵守同源策略，
浏览器Uncaught QuotaExceededError错误（localStorage超出限额）
木易
05-24 2万+
Web Storage网络存储 HTML5的Web Storage网络存储是指网络应用程序用于在网络浏览器存储方法和通讯协议，支持持久数据存储，类似于Cookie，以及window-local存储。网络存储又分为localStorage本地存储和sessionStorage会话存储。 localStorage 本地存储localStorage用于持久化的本地存储，除非主动删除数据，否则数据永远不
js查看浏览器本地存储
07-28
你可以使用JavaScript的`localStorage`对象来查看浏览器的本地存储。`localStorage`提供了一种简单的键值对存储方式，可以在浏览器的会话期间持久化保存数据。 要查看本地存储中的数据，你可以使用以下代码： ```javascript // 检查本地存储是否可用 if (typeof(Storage) !== "undefined") { // 获取所有的键 for (var key in localStorage) { console.log(key + ": " + localStorage.getItem(key)); } } else { console.log("抱歉，您的浏览器不支持本地存储。"); } ``` 这段代码首先检查浏览器是否支持本地存储，然后通过`localStorage`对象获取所有键，并使用`getItem()`方法获取对应键的值。最后，它会在控制台打印出每个键值对。 请注意，`localStorage`中存储的数据只能是字符串类型，如果要存储其他类型的数据，你可能需要使用`JSON.stringify()`和`JSON.parse()`方法进行序列化和反序列化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值