开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

sessionStorage中字符串化数组的JSON.parse()出错

sessionStorage是HTML5提供的一种用于在浏览器中存储会话数据的机制。它与localStorage相似，但sessionStorage中存储的数据在会话结束后会被清除。

在sessionStorage中存储的数据必须是字符串类型，如果需要存储数组等复杂数据类型，需要将其转换为字符串。常见的方法是使用JSON.stringify()将数组转换为字符串进行存储，而在需要使用时，可以使用JSON.parse()将字符串转换回数组。

然而，当使用JSON.parse()对sessionStorage中的字符串化数组进行解析时，可能会出现错误。这可能是由于以下几个原因导致的：

存储的数据格式不符合JSON规范：JSON.parse()只能解析符合JSON规范的字符串，如果存储的数据格式不正确，解析时会抛出错误。在存储数据时，确保使用JSON.stringify()将数据正确地转换为字符串。
存储的数据包含特殊字符：如果存储的数据中包含特殊字符（如引号、斜杠等），在解析时可能会导致错误。可以尝试使用encodeURIComponent()对数据进行编码，然后在解析时使用decodeURIComponent()进行解码。
存储的数据过大：sessionStorage的存储容量有限，如果存储的数据过大，可能会导致解析错误。在存储数据时，确保数据大小适合sessionStorage的限制。

为了解决这个问题，可以尝试以下方法：

检查存储的数据格式是否正确，确保使用JSON.stringify()将数据正确地转换为字符串。
如果存储的数据中包含特殊字符，可以尝试使用encodeURIComponent()对数据进行编码，然后在解析时使用decodeURIComponent()进行解码。
如果存储的数据过大，可以考虑使用其他存储机制，如IndexedDB或服务器端存储。

腾讯云提供了多种云计算相关的产品，如云数据库、云服务器、云存储等，可以根据具体需求选择适合的产品。具体产品介绍和链接地址可以参考腾讯云官方网站：https://cloud.tencent.com/

相关搜索:sessionStorage到数组中，并打印数组中的所有值如何在sessionStorage中显示基于数组的div 字符串变量中的JSON.parse标签数据初始化bash中的二维数组出错确定字符串数组中字符串的频率时出错初始化结构元素的数组时出错 C打印字符串数组中的字符串时出错 JavaScript中的JSON.parse(this.response)字符串问题如何使用JSON.parse在数组中查找产生错误的对象在WebService调用中序列化字符串时出错标记化由字符串组成的数组反序列化SSIS脚本组件中的JSON数组时出错数组java中存储的数字出错 C中数组的输出错误为什么字符串数组在JSP中抛出错误 Javascript中的类型化数组如何在C#中反序列化字符串数组的JSON数组 PHP:从序列化数组中删除整个数组的字符串计数在BigQuery中取消嵌套JSON字符串化数组数组到数组中的字符串

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JSON.stringify()与JSON.parse()

",objCopy)我们发现 undefined、函数、symbol值，在序列化过程中会被忽略undefined、任意的函数、symbol 值将会换成 null（出现在数组中时）let person...对我们需要的数据进行拷贝。在拷贝的过程中需要注意以上的情况。否者可能出现翻车。JSON.string()也单独用在 get 请求将数组进行序列化。这个时候各位小伙伴也需要注意一下。...6.日期对象将会对其序列化为字符串string7.循环引用的对象将会抛出错误8.undefined、任意的函数、symbol 值，在序列化过程中会被忽略【出现在非数组对象的属性值中时】或者被转换成 null...怎么单一的字符串和空数组，数字也可以呢？其实没有矛盾，你直接使用 JSON.parse([])这样肯定是不行的。...如：数组，对象，单一的字符串或者数字4.JSON.parse() 不允许用逗号作为结尾特别提醒：在使用 JSON.parse的使用需要注意第一个参数是否是JSON字符串。

1221 0

JSON.stringify()和JSON.parse() 的使用总结

replacer (可选) 如果该参数是一个「函数」，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理。...如果该参数是一个「数组」，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中。如果该参数为 null 或者未提供，则对象所有的属性都会被序列化。...,null]' 在非数组对象中，undefined、「任意的函数」以及 symbol 值在序列化的过程中会被忽略 JSON.stringify({x: undefined, y: Object, z:...JSON.parse 语法 JSON.parse(text[, reviver]) 参数 text 要被解析成 JavaScript 值的字符串。...我们知道 localStorage/sessionStorage 只可以存储字符串，当我们想存储对象的时候，需要使用 JSON.stringify转换成字符串，获取的时候再 JSON.parse //

1.4K1 0

vuex + sessionstorage 解决vue项目刷新后页面空白数据丢失

用来封装设置数据，其参数是key名　　　　因为sessionStorage存储的数据只能是字符串，对于常用的对象和数组是存储不了的。　　　　...所以在getItem这里需要JSON.parse来将JSON 字符串转换（“格式化”）为对象、　　　　在setItem里需要JSON.stringify处理来将对象或者数组转换（“压缩”）为一个 JSON...字符串 keys里边封装了获取指定下标对应数据的key名，所以参数是index值 removeItem负责移除某一个指定key的对应数据 clear负责清楚当前所有的sessionStorage数据...第二部分接下来清楚了五个方法各自的用法，来说说我的项目逻辑 vuex的state中，定义这个状态：ActiveProgressEnum 这个是用户参加活动的进程值，只要按流程走，他会一直变化，但是若初始化进来时...而在判断的下边，调用ajax获取数据，并把响应结果中的关键信息(本案例中的newTeamID)一并寄托给sessionStorage： $axios.get(state.ownSet.dataUrl +

2.9K2 0

H5-locaStorage解析

上述的两种方式都可以往localStorage中存值我们如何取存在localStorage中的值呢 console.log(localStorage.name); console.log(localStorage.getItem...移除了age后，就只剩name了深入解析localStorage 特点 ajax发送数据的时候不会带有localStorage存的值 localStorage存的值都是以字符串的方式来存的 localStorage...从上述现象中我们可以找到以下特点：存入的数组变成了散列的值存入的对象被调用了Object.prototype.toString()方法，返回了一个对象的类型那我们如何向localStorage中存入对象和数组呢...我们根据localStorage的特点，存入json的字符串即可，使用的时候再转义回来即可浅谈sessionStorage sessionStorage在使用上和localStorage基本上一样 cookie...4kb 是都可以存是超过设置的时间过期 loaclStorage 5M 否只能存字符串 是可以存很久，窗口关闭还在 sessionStorage 2M 否只能存字符串 是一个会话的时间，窗口关闭消失

5202 0

localStorage 的相关运用

应注意，无论数据存储在 localStorage 还是 sessionStorage ，它们都特定于页面的协议。另外，localStorage 中的键值对总是以字符串的形式存储。...(需要注意，和 js 对象相比，键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型). localStorage 的使用也非常简单，分为存入和读取，可以将其绑定在事件方法中。...localStorage.setItem("key", JSON.stringify(arr)); 这个方法就是将数组arr存到了浏览器的localStorage 中，它的参数名叫 key const...arr = JSON.parse(localStorage.getItem("key")); 就是读取浏览器中参数名为 key 的参数值。...比如静态保存某个设置参数，可以将其写入数组中，然后通过 localStorage 存储，原本刷新就会显示默认设置，现在可以在每次刷新的适合读取存入的参数。

2591 0

vuex存储和本地存储(localstorage、sessionstorage)的区别

localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理。...注：很多同学觉得用localstorage可以代替vuex, 对于不变的数据确实可以，但是当两个组件共用一个数据源（对象或数组）时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，localstorage...Vuex数据状态持久化的使用场景 1、购物车比如你把商品加入购物车后，没有保存到后台的情况下，前端来存，就可以通过这种方式vuex+localStorage(sessionStorage)。...3、一些不会经常改变的数据比如城市列表等（当前也要留下可以更新的入口，比如版本号）小提示：localStorage.setItem(key, String), set的值必须是字符串，如果你的数据是对象都需要先行转换...（JSON.stringify(xxx)）,取出时localStorage.getItem(key)，取出后的字符串可以通过JSON.parse(xxx)转回对象。

1.8K1 0

慎用JSON.stringify

JSON.stringify 强大的第二个参数 replacer 这个参数是可选的，可以是一个函数，也可以是一个数组当是一个函数的时候，则在序列化的过程中，被序列化的每个属性都会经过该函数的转换和处理...，利用的是 JSON.stringify 中对象属性值为 undefined 就会在序列化中被忽略的特性（后面我们会提到）值得注意的是，在一开始 replacer 函数会被传入一个空字符串作为 key...Gopal age 25 like FE {"age":25,"like":"FE"} 可以看出，通过第二个参数，我们可以更加灵活的去操作和修改被序列化目标的值当第二个参数为数组的时候，只有包含在这个数组中的属性名才会被序列化...存储对象我们知道 localStorage/sessionStorage 只可以存储字符串，当我们想存储对象的时候，需要使用 JSON.stringify 转换成字符串，获取的时候再 JSON.parse...稍等稍等，先看完以下的注意事项再做决定吧，可能在某些场景下会触发一些难以发现的问题转换属性值中有 toJSON 方法，慎用转换值中如果有 toJSON 方法，该方法返回的值将会是最后的序列化结果 /

1K3 0

慎用 JSON.stringify

JSON.stringify 强大的第二个参数 replacer 这个参数是可选的，可以是一个函数，也可以是一个数组当是一个函数的时候，则在序列化的过程中，被序列化的每个属性都会经过该函数的转换和处理...，利用的是 JSON.stringify 中对象属性值为 undefined 就会在序列化中被忽略的特性（后面我们会提到）。...当第二个参数为数组的时候，只有包含在这个数组中的属性名才会被序列化： JSON.stringify(myIntro, ['name']) // {"name":"Gopal"} 中看不中用的第三个参数...存储对象我们知道 localStorage/sessionStorage 只可以存储字符串，当我们想存储对象的时候，需要使用 JSON.stringify 转换成字符串，获取的时候再 JSON.parse...转换属性值中有 toJSON 方法，慎用转换值中如果有 toJSON 方法，该方法返回的值将会是最后的序列化结果。

5033 0

前端常用utils工具方法小总结

前端常用utils工具方法小总结 // 数组去重 const uniqueArray = arr => [...new Set(arr)]; // 从url获取参数，并且转换成对象 const...getParameters = URL => JSON.parse(`{"${decodeURI(URL.split("?")...(Math.abs(date1.getTime() - date2.getTime()) / 86400000) //查找日期位于一年中的第几天 const dayOfYear = (date) =...> Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24); //时间格式化 const timeFromDate...() + str.slice(1); //随机字符串 const randomString = () => Math.random().toString(36).slice(2) //去除字符串中的

2283 0

关于HTML5中的sessionStorage和localStorage

SessionStorage：将数据保存在session对象中，所谓session是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间会话，也就是用户浏览这个网站所花费的时间就是session...Value：表示值，也就是你要存入Key中的值，可以按照变量赋值来理解。...用法和sessionStorage一样。存储在本地时发现个问题，sessionStorage只能存储字符串，不能直接存储数组和对象。...可以很明显的看到输出的字符串，不是我们想要的object。所以就查资料啊。发现了JSON。...=str; datas=JSON.parse(sessionStorage.data); console.log(datas); console.log(typeof datas) 再来看控制台

1.3K6 0

vue浏览器缓存问题_vue兼容浏览器能兼容到几

一.客户端缓存:localStorage/sessionStorage localStorage -持久化的本地存储,除非主动删除数据，否则数据永远不会过期. sessionStorage-本地存储一个会话...（session）中的数据,当页面关闭,数据将清除.存储大小约为5M. ---- 二.localStorage(sessionStorage)基本用法 1.设置 setItem(key,value)...localStorage.removeItem('a'); //删除指定缓存 localStorage.clear(); //清空所有本地缓存注意: ①localStroage返回的所有数据都是字符串....当缓存的数据为json时,需要用以下方法转换: JSON.stringify()用于从一个对象解析出字符串； JSON.parse()用于从一个字符串中解析出json对象。...); // 18 ②sessionStorage用法与localStroage一样,只不过它们的作用域不一样;sessionStorage是会话级别的存储，关闭页面，数据将被清除. ---- 三.项目应用

6552 0

医美小程序实战教程（三）

目录 01 需求分析 02 导航栏组件介绍 03 模块的导入、导出介绍上一篇回顾我们上一篇介绍了javascript中的export、import语法，本篇我们继续。...# web页面的缓存我们还是看一下MDN的解释 > 只读的localStorage 属性允许你访问一个Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。...localStorage 类似 sessionStorage，但其区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage...[在这里插入图片描述] 尤其在云函数传参的时候切记json的构造的时候不要有语法错误 JSON.parse MDN的解释是 JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript...，或者指定的 replacer 是数组，则可选择性地仅包含数组指定的属性。

7030 0

本地存储的方式

localstorage和sessionStorage localstorage定义：数据是持久保存的，除非手动清除。...页面关闭数据还在 sessionStorage定义:为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载保存JSON格式的数据之前，需要把JSON格式的数据转换为字符串，称为序列化...可以使用JSON.stringify()序列化JSON格式的数据为字符串数据。...var stringData = JSON.stringify(jsonObject); 如果把存储的Storage中的数据以JSON格式对象的方式去访问，需要把字符串数据转换为JSON格式的数据，成为反序列化...可以使用JSON.parse()反序列化字符串数据为JSON格式的数据。

971 0

JavaScript中字符串与数组的相关操作

js 判断字符串是否包含某字符串 var Cts = "bblText"; if(Cts.indexOf("Text") > 0 ) { alert('Cts中包含Text字符串'); } indexOf...jQuery判断数组是否包含了指定的元素 var arr = [ "xml", "html", "css", "js" ]; $.inArray("js", arr); //返回 3, 如果不包含在数组中...,则返回 -1,若是包含，则返回对应元素所在数组中的下标值，该值从0开始; jquery 数组添加元素 push() //向数组的末尾添加一个或更多元素，并返回新的长度。...pop() //删除并返回数组的最后一个元素。...js 判断字符串是否包含某字符串,String对象中查找子字符,indexOf jquery 数组添加元素

1.6K1 0

数组中的字符串匹配

数组中的字符串匹配题目内容给你一个字符串数组 words ，数组中的每个字符串都可以看作是一个单词。请你按任意顺序返回 words 中是其他单词的子字符串的所有单词。...如果你可以删除 words[j] 最左侧和/或最右侧的若干字符得到 word[i] ，那么字符串 words[i] 就是 words[j] 的一个子字符串。...示例 1：输入：words = [“mass”,“as”,“hero”,“superhero”] 输出：[“as”,“hero”] 解释：“as” 是 “mass” 的子字符串，“hero” 是...“superhero” 的子字符串。...builder中第二个循环去对比字符串，如果字符串是子字符串那么一定会出现两次，所以判断首次出现的位置和第二次出现的位置不同，就代表他是子字符串 解题代码如下： class Solution {

2.2K4 0

Java中字符串数组的输入与输出

大家好，又见面了，我是你们的朋友全栈君。今天刷题遇到一个坑，老是接收不到字符串数组。即用str[i]=sc.nextLine();这样的方式去接收数组的话，打印的时候总是会少一个。...Scanner sc = new Scanner(System.in); int n = sc.nextInt(); String str[] = new String[n]; // mmp字符串数据居然要这么输入第一个值...sc.nextLine(); } for (int i = 0; i < n; i++) { System.out.println(str[i]); } } } 结果：输入的正确姿势...Scanner sc = new Scanner(System.in); int n = sc.nextInt(); String str[] = new String[n]; // mmp字符串数据居然要这么输入第一个值

2.6K4 0

数组中的字符串匹配

暴力算法这个题的数据范围挺小的，可以直接暴力求解，就不贴代码了拼接字符串 可以把words里的所有单词拼成一个字符串str，每个单词之间用','隔开，然后遍历words的每个单词，如果这个单词在

1.9K3 0

vue中sessionStorage的使用

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。...sessionStorage.setItem(string key, string value) //该方法接受一个键名(key)和值(value)作为参数，将键值对添加到存储中；如果键名存在，则更新其对应的值...sessionStorage.removeItem(string key) //将指定的键名(key)从 sessionStorage 对象中移除。...；读取时，通过JSON.parse()将文本转换回对象。...(userEntity)); // 取值时：把获取到的Json字符串转换回对象 var userJsonStr = sessionStorage.getItem(‘user’); userEntity

3.7K1 1

72笔试面试题

False，’undefined’是已经声明的一个字符串，所以与undefined相比结果为False；B的结果是true，在字符串和数字比较时，会将字符串转换为数字再进行比较。...左右的两个子字符串；之后将原字符串中的"www.alipay.com"存入到一个变量里面使用encodeURI()和decodeURI()对url进行编码和解码，取出’?’...6、请将javascript对象account，存储到sessionStorage中，并将account对象从sessionStorage中取出，取出之后打印出account对象的所有属性，var account...= {Idx:1,Name:'JoyReader'}; sessionStorage.setItem('key', account); JSON.parse(window.sessionStorage.getItem...请遍历此数组，将结果添加至形如下面的表格中,要求“禁用”链接上要有Idx的属性值 IdxName操作</th

8862 0

HTML5本地存储：从入门到精通

概念： HTML5本地存储是一种允许Web应用程序在用户浏览器端本地保存数据的技术，无需依赖服务器。它增强了Web应用的离线功能、个性化设置保留以及性能优化。...应用场景：适用于临时状态、短期用户操作记录等需要在当前会话中保持但不必跨会话持久化的数据。...2) IndexedDB Indexed Database API (IndexedDB) 特性：结构化存储：支持存储复杂数据类型（如对象、数组、二进制数据），并可通过索引来高效检索。...事务处理：内置事务机制，确保数据一致性，即使在复杂的多步骤操作中也能保证数据完整性。...4️⃣ 最佳实践数据序列化：将复杂数据结构（如对象、数组）转化为字符串（如JSON）再存入Web Storage。兼容性检查：使用typeof localStorage !

1001 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭