localStorage 使用详解

最新推荐文章于 2023-03-19 20:58:55 发布
最新推荐文章于 2023-03-19 20:58:55 发布
阅读量3k 收藏 13
点赞数 1
分类专栏： 前端世界 文章标签： JavaScript HTML5 localStorage
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jpch89/article/details/110306971
版权
本文详细介绍了JavaScript中的localStorage，包括其简介、如何调试、CRUD操作以及相关资源。localStorage提供了一种在用户浏览器中安全存储大量数据的方法，不受Cookie的4KB限制，且数据永久保存，只有通过特定方式才能删除。同时，文章还讲解了如何通过开发者工具进行数据的查看和操作。
摘要由CSDN通过智能技术生成

1. localStorage 简介

localStorage 和 sessionStorage 一样，都是 HTML5 中最新引入的 Web 存储 API。

Web 存储 API，英文为 Web Storage API，通过它可以方便地在用户浏览器中存储键值对。

Web 存储 API 包括两个对象：

  • localStorage
  • sessionStorage

在 HTML5 之前，应用数据需要存放在 Cookie 中，每次请求时都需要携带它。相较而言，Web 存储 API 拥有以下优点：

  • 不向服务器传输信息，更加安全。
  • 比起 [[202009011658 Cookie 数量和大小的限制|Cookie 4kb 的容量限制]]，可以在本地存储大量数据，通常为 5mb。

除此之外，localStorage 还有以下特点：

  • 永久存储数据，没有过期时间，除非使用
最低0.47元/天 解锁文章
团子大圆帅
关注
  • 1
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
localStorage详解
【蜀山风行】的专栏
06-06 1530
LocalStarage详解 1. 基本介绍    在HTML5中，本地存储是一个window的属性，包括localStorage和sessionStorage，从名字应该可以很清楚的辨认二者的区别，前者是一直存在本地的，后者只是伴随着session，窗口一旦关闭就没了。 2. API   localStorage可以看成为一个特殊的Array，允许通过localStarage["
localStorage的存储,读取,删除
weixin_44195615的博客
04-15 4613
localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。localStorage 属性是只读的。 语法：window.localStorage 一、存储 window.localStorage.setItem('key',value) 二、读取 window.localStorage.getItem('key') 三、删除 window.local.
从localStorage删除数据
qq_18072961的博客
05-21 3013
1.从localStorage删除数据 deleteItem=function(){ vararr=localStorage.getItem('name'); //得到key为name的值 varlist=arr.split(','); //将字符串通过逗号分割成数组 if(arr){ vardoi=$(event.currentTarget).filter('a').attr('id'); //通过...
JavaScript本地存储实践localStorage
我的E家
12-13 5277
本地存储 解决方案很多，比如Flash SharedObject、Google Gears、Cookie、DOM Storage、User Data、window.name、Silverlight、Open Database等。 缓存方案 特点 限制 Cookie 在web中得到广泛应用，但局限性非常明显，容量太小， 有些站点会因为出于安全的考虑而
前端使用 url/localStorage 将数据传到下一页
Sparrowflying的博客
03-28 1777
1、url —— 需要将少量数据传给下一页，可以直接加在url上如（1）设置下一页链接 https://www.test.com/index.html?type1（2）使用window.location.search 获取 href 属性中跟在问号后面的部分示例：var test = window.location.search;alert(test);返回：?type12、localStorag...
localStorage的常见使用
weixin_56361614的博客
09-24 491
文章源链接 https://blog.csdn.net/weixin_44535476/article/details/90272471 localStorage的常见使用 一、增，删，改，查 1.增 localStorage.setItem("a","1") //第一种，官方推荐 localStorage.b = 2; //第二种 localStorage["c"] = 3; //第三种 2.查 localStorage.getItem("key"); //查找指定键 3.删 localStora.
本地存储localStorage用法详解
08-29
本地存储localStorage用法详解 本地存储localStorage是一种在HTML5中引入的新特性，主要用来解决cookie存储空间不足的问题。localStorage可以将数据存储在客户端，解决了cookie的4K限制问题，且可以将第一次请求的...
详解JavaScript中localStorage使用要点
10-22
localStorage主要用来替代cookie，解决cookie(可参考cookie使用要点)读写困难、容量有限的问题，对js localstorage的使用相关知识感兴趣的朋友一起学习吧
详解vue中localStorage的使用方法
10-17
主要介绍了详解vue中localStorage的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
本地储存与本地删除----localStorage.setItem与localStorage.removeItem----里边都有注释
zx960103的博客
07-28 2142
<input type="text" name="" id="q2"> <input type="checkbox" name="" id="q1">用户账号 <script> let q1 = document.querySelector('#q1') let q2 = document.querySelector('#q2') // if判断本地储存是否有name这个数据。如果有，执行里面的内容...
LocalStorage以及SessionStorage的区别以及Storage与cookie的区别
weixin_52544526的博客
03-19 156
浏览器的本地存储 - storage+ localStorage 和 sessionStorage+ 浏览器本地的存储+ 特点:=> 只能存储字符串类型=> 如果你需要存储的是 对象或者数组 相关的内容=> 转换为 json 格式存储。
一文读懂：如何在浏览器中存储、拿取、删除数据？
Shids_的博客
01-18 1522
一文读懂：如何在浏览器中存储、拿取、删除数据？
Web存储-------localStorage和seccionStorage详解
IT_10的博客
07-18 2471
使用场景： Web应用允许使用浏览器提供的API实现将数据存储到用户电脑上。这用客户端存储遵循“同源策略”，因此不同站点的页面是无法相互读取对方存储的数据，而同一站点的不同页面之间是可以相互共享存储数据的，它为我们提供了一种通信机制，例如，一个页面填写的表单数据可以显示在另一个页面中。Web应用可以选择存储数据的有效期：临时存储可以让数据保存至当前窗口关闭或者浏览器退出；永久存储可以将数据永久存储...
HTML5 localStorage
稻香的专栏
07-31 834
HTML5中提供了localStorage对象可以将数据长期保存在客户端，直到人为清除。 localStorage提供了几个方法: 1、存储：localStorage.setItem(key,value) 如果key存在时，更新value 2、获取：localStorage.getItem(key) 如果key不存在返回null 3、删除
localStorage深入解析
qq_31965515的博客
12-18 1911
localStorage 使用指南-你所不知道的 localStorage 相信大家对于本地存储的 localStorage 和 sessionStorage 对象已经非常熟悉了。那么首先花点小篇幅稍微回顾一下。 localStorage 是只读的。数据存储也是跨浏览器会话。localStorage 类似于sessionStorage。区别在于，数据存储在 localStorage 是无期限的...
LocalStorage和sessionStorage之间的区别
热门推荐
fcdd123的专栏
02-21 3万+
在HTML 5 最开始时，本地存储有两种方式：一种是web Storage，另一种是web SQL。由于web SQL的实现是基于SQLite，它更倾向于DataBase方向，且W3C官方在2011年11月宣布不在维护web SQL规范，故其API接口目前已经不属于HTML 5的范畴。因此，目前我们常讲的HTML 5本地存储，多指的是web Storage。
js localStorage保存/获取/删除
phpfzh的博客
09-27 1万+
var TOKEN_KEY = "jwtToken"; //取值  function getJwtToken() {         return localStorage.getItem(TOKEN_KEY);     } //保存     function setJwtToken(token) {         localStorage.setItem(TOKEN_
localStorage和sessionStorage
wunianisme的博客
10-13 159
HTML5 Web存储包括localStorage和sessionStorage，HTML5 Web是以键值对的形式存储于客户端，通常存储的数据类型为字符串。 localStorage localStorage能够永久存储，除非主动清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端中保存，不参与和服务器的通信。 常用方法如下： 1.保存数据到本地...
js操作cookie
紫色星空
12-19 516
//取得cookie       function getCookie(name) {         var nameEQ = name + "=";         var ca = document.cookie.split(';'); //把cookie分割成组           for ( var i = 0; i             var c = ca[i]; //
详解vue中localstorage和sessionstorage的使用
最新发布
08-23
在Vue中，可以使用LocalStorage和SessionStorage来进行本地存储。LocalStorage用于长期存储数据，即使关闭浏览器后数据仍然存在，而SessionStorage则用于临时存储数据，关闭浏览器后数据会被清除。 要在Vue中使用LocalStorage和SessionStorage，你可以按照以下步骤进行： 1. 首先，你需要在Vue组件中导入LocalStorage和SessionStorage方法。你可以使用`import`语句将它们导入到你的组件中。 2. 接下来，你可以使用`localStorage.getItem(key)`方法来获取存储在LocalStorage中的数据，其中`key`是你设置的键名。同样地，你可以使用`sessionStorage.getItem(key)`方法来获取存储在SessionStorage中的数据。 3. 如果你想要将数据存储到LocalStorage中，你可以使用`localStorage.setItem(key, value)`方法，其中`key`是你设置的键名，`value`是你要存储的值。同样地，你可以使用`sessionStorage.setItem(key, value)`方法将数据存储到SessionStorage中。 4. 如果你想要删除LocalStorage或SessionStorage中的数据，你可以使用`localStorage.removeItem(key)`或`sessionStorage.removeItem(key)`方法，其中`key`是你要删除的键名。 5. 最后，如果你想要清除所有的LocalStorage或SessionStorage中的数据，你可以使用`localStorage.clear()`或`sessionStorage.clear()`方法。 通过使用这些方法，你可以在Vue中方便地使用LocalStorage和SessionStorage来进行本地存储操作。 请注意，由于LocalStorage和SessionStorage是基于键值对的存储方式，所以你需要注意键名的唯一性以及数据的格式。此外，LocalStorage和SessionStorage的存储容量是有限的，通常在5MB左右，超过限制可能会导致数据存储失败。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Vue中localstorage和sessionstorage的使用](https://blog.csdn.net/baozi141990/article/details/103481892)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值