localStorage存储注意点

最新推荐文章于 2023-12-13 18:04:43 发布
原创 最新推荐文章于 2023-12-13 18:04:43 发布 · 180 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文探讨了在JavaScript中如何使用JSON.stringify()和JSON.parse()方法来处理引用类型数据，如对象和数组，进行本地存储。通过localStorage.setItem()保存JSON格式的字符串，然后使用JSON.parse()转换回对象，确保数据正确读取和操作。这个过程对于前端开发中的数据持久化至关重要。

/在存储的数据为引用类型数据时，如对象，数据，就要使用json的方法进行序列化存储为json字符串的形式，如：
在这里插入图片描述
在这里插入图片描述
应该写为： localStorage.setItem(“obj”, JSON.stringify(obj)) //保存为JSON格式的字符串
在这里插入图片描述
但是如果你log一下的话：
在这里插入图片描述

在这里插入图片描述
打印结果为字符串而不是个对象，所以不能获取到内部的值，所以需要再用JSON的parse方法再转变为对象
在这里插入图片描述
在这里插入图片描述

localStorage使用时的注意点
sjw1039115768的博客
06-17 8170
一、localStorage，sessionStorage，cookie的简单介绍localStorage:仅在客户端存储不参与服务器通信，存储大小一般为5M，如果不是人为清除，那么即使是关闭浏览器也会一直存在。sessionStorage:仅在客户端存储不参与服务器通信，存储大小一般为5M，会话级存储，也就是说如果关闭当前页面或者浏览器那么就会清除cookie:客户端存储，参与服务器通信，存储大...
本地存储 localStorage的注意事项
Crazykun的博客
07-17 984
1、本地存储localStorage里面只能存储字符串格式，因此如果需要存储对象格式的数据，需要把对象转换成字符串格式。 使用JSON.stringify(XXX) 2.获取本地存储的数据，需要把里面的字符串转换成对象格式 使用JSON.parse(XXX),这样的到的数据才能使用。 注：1、存储操作：localStorage.setItem("XXX",JSON.stringify(XXXX)). 2、获取本地存储操作：localStorage.getItem("XXX") XXX为存储.
localStorage 用法及使用注意事项
qq_43344133的博客
05-17 1万+
localStorage 用法及使用注意事项 localStorage 介绍 在HTML5中，为了解决cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，增加了一个 localStorage，主要是用来作为本地存储的；localStorage 中一般浏览器支持的容量大小是5M，针对不同的浏览器，localStorage容量大小会有所不同。 localStorage 使...
【前端】localStorage 用法及使用注意事项
michiko98的博客
06-14 1万+
localstorage
localStorage存储对象需要注意的点
曾小超的博客
09-15 644
localStorage没办法直接存储对象 var obj={"name":"小明","sex":"男"} 存对象 localStorage.setItem("obj",JSON.stringify(obj)); 取对象 var obj=JSON.parse(localStorage.getItem("obj")); console.log("obj"，obj);
使用 localStorage 存储 JavaScript 几乎所有数据类型
dizuncainiao的博客
12-13 2284
100% 基于 localStorage纯原生封装，支持string、number、boolean、null、undefined、NaN、object、Set、Map、bigint、symbol 多达 11 种数据类型本地存储，更好的 localStorage 解决方案，1:1 实现 localStorage api 用法，100%同步写法，无 async 、await
JS中localStorage的用法注意点
qq_37981080的博客
01-16 764
拖拽元素
Vue使用localStorage存储数据的方法
12-11
在前端开发中，Vue.js 是一个非常流行的轻量级JavaScript框架，它提供了高效的...在实际开发中，要注意处理可能出现的错误，如JSON解析失败，以及在适当的时候清理`localStorage`中的数据，以避免占用过多的存储空间。
HTML5 LocalStorage 本地存储详细概括（多图）
09-27
需要注意的是，LocalStorage只能存储字符串，所以存储非字符串数据时需要进行类型转换。此外，由于数据存储在客户端，安全性较低，敏感信息不应直接存储在LocalStorage中。同时，由于数据的持久化，应谨慎处理可能的...
本地存储localStorage用法详解
08-29
本地存储localStorage用法详解 本地存储localStorage是一种在HTML5中引入的新特性，主要用来...localStorage是一种非常有用的特性，能够解决cookie存储空间不足的问题，但需要注意浏览器的兼容性和隐私模式下的限制。
精选资源
localstorage
05-06
下面我们将深入探讨 LocalStorage 的相关知识点： 1. **数据存储限制**：LocalStorage 提供的存储空间通常在5MB左右，不同浏览器可能会有所不同。这个容量相对较小，但足以存储用户的一些偏好设置、游戏进度等数据...
Vue中props用法和传值问题
热门推荐
VegetableKCCCC的博客
10-14 3万+
props的基本用法是父组件给子组件传输数据和验证 基本用法： 1.在父组件中的data中定义值 2.在子组件中使用props声明要引用哪个值 3.标签中使用 4.在template模板中，要使用中划线写法；在script脚本中使用小驼峰 props的使用： 1.静态props 静态即传入的值不变化，直接在父组件中定义，子组件中使用 2.动态props 动态即传入的值会变化，父组件中要动态地绑定父组件的数据。 3.props验证 验证传入的props参数的数据规格，如果不符合数据规格则发出警告，注意这个数据
同时发起100个http请求，总共会建立多少个TCP连接
VegetableKCCCC的博客
10-14 5503
要搞明白这个问题，首先要解决以下问题： 1.现代浏览器在与服务器建立了一个TCP连接后，是否会在一个HTTP请求完成之后断开？什么情况下会断开？ 在HTTP/1.0中，一个服务器在发送完一个HTTP响应后，会断开TCP连接。但是这样每次请求都会重新建立和断开TCP连接，代价过大。所以虽然标准中没有设定，某些服务器对Connection: keep-alive的Header进行了支持。 意思是说，完成这个HTTP请求之后，不要断开HTTP请求使用TCP连接。这样的好处是连接可以被重新使用，之后发送HTTP请求
Vue中异步更新队列
VegetableKCCCC的博客
09-15 2582
Vue 在更新 DOM 时是异步执行的 看下官网介绍: 只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不
关于toString的自动调用
VegetableKCCCC的博客
08-20 1376
首先看一道函数 结果alert为6 这里涉及到这个toString的自动调用问题！ 这里log一下add(1)发现打印了字符串形式的tmp函数的函数体，但是类型为函数 然后再看这道 看结果，注意这个函数的执行顺序： fn(1)函数调用开始，从上到下，先打印了‘第一次’,然后return help，注意！return后面如果为函数体的话，为了输出字符串会自动调用toString方法，也即是会自动执行这里的help.toString()！ 意思即是就算这个函数里面没有这个help.toString()
CSRF攻击
VegetableKCCCC的博客
09-28 1045
CSRF（跨站请求伪造）攻击 CSRF(Cross Site Request Forgery,跨站请求伪造)是一种近年来才逐渐被大众了解的网络攻击方式，又被称为One-Click Attack或Session Riding。 攻击原理 某用户登录了A网站，认证信息保存在cookie中。当用户访问攻击者创建的B网站时，攻击者通过在B网站发送一个伪造的请求提交到A网站服务器上，让A网站服务器误以为请求来自于自己的网站，于是执行响应的操作，该用户的信息边遭到了篡改. 总结起来就是，攻击者利用用户在浏览器中保存的认
前后端路由,单页面应用以及vue-router两种模式
VegetableKCCCC的博客
09-29 1033
前后端分离 ===> 利用Ajax，可以在不刷新浏览器的情况下异步数据请求交互。 单页应用（只有一个html文件，整个网站的所有内容都在这一个html里，通过js来处理）不仅仅是在页面交互是无刷新的，连页面跳转都是无刷新的。为了实现单页应用 ==> 前后端分离 + 前端路由。（更新视图但不重新请求页面） 前端路由实现起来其实也很简单，就是匹配不同的 url 路径，进行解析，加载不同的组件，然后动态的渲染出区域 html 内容。 早期的后端路由 前端路由 单页面应用: 单页Web应用（sing
==隐式转换
VegetableKCCCC的博客
09-27 839
！！关于JavaScript中0、空字符串、'0’是true还是false的总结 首先看下面： false == 0 输出true；因为在做判断的时候，两者中有boolean（布尔类型），会把boolean先转化为number（数字类型），false为0，true是1。也就是等价于判断 0 == 0 ，结果为true。 ‘’ == false 输出为true**；js中空字符串与0相等，也就意味着空字符串等等于false**。 ‘0’ == false 正确输出为true；这里犯了一个错误认为结果会.
vue2的响应式原理
VegetableKCCCC的博客
09-29 775
Vue的响应式原理是用Object.definePrototy()的et与get结合观察者模式进行数据劫持； 首先了解一下Object.definePrototy()的set与get； 在获取对象prototy的时候，会自动调用get方法，在修改时会自动调用set方法 VUE给data里所有的属性加上set,get这个过程就叫做Reactive化。 观察者模式（发布订阅者模式） 观察者模式分为注册环节与发布环节 依赖dep类与watch类 这个Watcher实际上是连接Vue组件与Dep的桥梁。
使用localStorage需要注意什么
08-23
2. 存储限制：localStorage存储的数据量有限，一般为5-10MB，因此不能存储过大的数据。 3. 数据类型：localStorage只能存储字符串类型的数据，如果需要存储其他数据类型，需要进行序列化和反序列化。 4. 数据有效...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值