关于本地缓存localstorage与sessionStorage 数组 （array）字符串（string） 对象（object）的存储技巧和注意事项

最新推荐文章于 2025-05-01 13:23:33 发布
最新推荐文章于 2025-05-01 13:23:33 发布
阅读量558 收藏 1
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cherry_zhang18/article/details/78455705
本文介绍如何使用JavaScript在浏览器中利用本地缓存(sessionStorage)存储和读取数组及对象的方法。重点讲解了在存储非字符串类型数据时，如何通过JSON.stringify()和JSON.parse()确保数据的正确保存与获取。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>本地缓存</title>  
  5. </head>  
  6. <body>  
  7.   
  8. </body>  
  9.     <script type="text/javascript">  
  10.     //储存一个数组到本地缓存数组  
  11.     var a = [1,2,3]  
  12.     console.log(typeof a)  //object  
  13.     //储存  
  14.     sessionStorage.setItem("sa",a);  
  15.     //取出  并用a1接收这个值  
  16.     var a1 = sessionStorage.getItem("sa")  
  17.   
  18.     //打印a1的数据类型  
  19.     console.log( typeof a1);//结果为string  
  20.   
  21.   
  22.     //取出来不能当做数组用，必须得把字符串转换成数组  
  23.     console.log(a1.split(",")) //  ["1", "2", "3"] 转换为“,”隔开的数组,其数组元素还是字符串，  
  24.                                 //用之前先转换为Number类型,-0或者*1即可转换为Number类型  
  25.       
  26.     // console.log(JSON.parse(a1))  //这一行就会报错  因为a1本来就不是json串类型的数据，  
  27.     //他只能转换JSon串类型的数据  
  28.   
  29.     //若储存前先转换为json串类型  
  30.     var b = [1,2,3]  
  31.   
  32.     //转换为Json串  
  33.     var b1 = JSON.stringify(b);   
  34.     sessionStorage.setItem("sb",b1);  
  35.   
  36.     var b2 = sessionStorage.getItem("sb");  
  37.   
  38.     console.log( typeof b2) //string   
  39.     console.log( typeof JSON.parse(b2)) // object  
  40.     console.log( typeof JSON.parse(b2)[2])  //number  
  41.     console.log(  JSON.parse(b2)) //[1,2,3]  
  42.     console.log(JSON.parse(b2)[1])  //数组的第二个元素2  
  43.   
  44.     //总结 1、 存储前转换为json串的形式，取出后转换为json对象形式可以当做数组直接用；  
  45.     //     2、无论存储前是什么数据类型  取出来之后他都会是一个字符串（string）类型  
  46.     //     3、存储字符串时，取出来就直接可以用。  
  47.     //     4、特别注意，当你存储一个对象的时候，必须先转换为json串存储，不然对象就没法用了  
  48.       
  49.   
  50.   
  51.     //看下面的demo  
  52.     var c = {  
  53.         name:"name",  
  54.         age:18,  
  55.         love:"美女"  
  56.     }  
  57.   
  58.     sessionStorage.setItem("sc",c);  
  59.   
  60.     var c1 = sessionStorage.getItem("sc");  
  61.   
  62.     console.log(typeof c1)  //string  
  63.   
  64.     console.log(c1) // [object object]  
  65.     console.log(c1.anme) //undefined  
  66.   
  67.     //是不是要转换为json对象  我们试试  
  68.     // var c2 = JSON.parse(c1);   //直接报错    继续向下看  
  69.       
  70.     //存储前转换为json串  
  71.   
  72.     var d = {  
  73.         name:"name",  
  74.         age:18,  
  75.         love:"美女"  
  76.     }  
  77.   
  78.     var e = JSON.stringify(d)  
  79.     sessionStorage.setItem("sd",e);  
  80.   
  81.     var d1 = sessionStorage.getItem("sd");  
  82.   
  83.     console.log(typeof d1)  //string  
  84.   
  85.     console.log(d1) // {"name":"name","age":18,"love":"美女"}  
  86.     console.log(d1.anme) //undefined  
  87.   
  88.     var f = JSON.parse(d1)  
  89.     console.log(f)  //Object {name: "name", age: 18, love: "美女"}  
  90.     console.log(f.age) //18  
  91.   
  92.     </script>  
  93. </html>  
前端存储方案：对比localStorage、sessionStorage与BOM
AI架构全栈开发实战笔记
04-29 675
随着单页应用（SPA）和渐进式Web应用（PWA）的普及，前端存储成为构建复杂应用的核心技术。三种存储的本质区别是什么？何时该选择持久化存储 vs 会话级存储？如何避免Cookie带来的性能损耗？存储容量限制如何影响架构设计？基础概念解析：定义三种存储的核心特性技术参数对比：生命周期、容量、作用域等关键指标底层原理剖析：浏览器如何实现数据存储与传输实战开发指南：完整代码示例与最佳实践性能与安全：网络开销、XSS/XSRF风险分析。
uni-app数据和缓存（十三）
A_nanda的博客
06-26 376
将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。从本地缓存中异步获取指定 key 对应的内容。从本地缓存中同步获取指定 key 对应的内容。异步获取当前 storage 的相关信息。同步获取当前 storage 的相关信息。从本地缓存中异步移除指定 key。从本地缓存中同步移除指定 key。同步清理本地数据缓存。
HTML5 sessionStorage会话存储
weixin_34238642的博客
07-20 2486
 　　sessionStorage 是HTML5新增的一个会话存储对象，用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。本篇主要介绍 sessionStorage(会话存储)的使用方式。包括添加、修改、删除等操作。 目录 1. 介绍 　　1.1 说明 　　1.2 特点 　　1.3 浏览器最小版本支持 　　1.4 适合场景 2. 成员 　　2.1 属性...
localStorage 和 sessionStorage 及其用法 对象属性操作方式
丶扁扁的糖是扁的 的博客
11-29 1173
sessionStorage 存在当前会话，但是并不是浏览器关闭。当前页面的sessionStorage在新建一个相同页面时，这个sessionStorage是不存在的。 它传递的条件是页面间的跳转，要通过超链接或者location.href或者window.open来打开另一个同域页面才能访问到这个sessionStorage。 localStorage 支持跨域隔离的最大5M的存储对象，满了报错。 用法 是不是用烂了这两个方法： localStorage.getItem('lastname
localStorage 保存对象Object
ISaiSai的专栏
05-09 9709
localStorage 只能保存字符串，如果直接setItem 一个对象，则会执行Object 的toString() 方法，保存其结果 var testObj = { "userName": "xixi", toString: function () { return "userName:'xixi'"; }
关于本地缓存localstorage与sessionStorage 数组 （array）字符串（string） 对象（object）的存储技巧和注意事项...
weixin_34168700的博客
09-26 540
localstorage与sessionStorage的使用方法都是一样的 唯一的区别在与 localstorage是永久储存在你的计算机上 sessionstorage只要浏览器关闭，存储就消失 <!DOCTYPE html> <html> <head> <title>本地缓存</title...
缓存数据之 存成数组 进行 对比。
weixin_45379180的博客
09-28 195
对比
localStorage存储对象，sessionStorage存储数组对象 ,cookie、localStorage和sessionStorage 区别
amyloverice的博客
09-30 3819
  前言 最近在用angular做商城购物车的功能模块，因为angular的watch监听，数据只要发生变化就能很方便的自动渲染页面。但随即出现的问题是，之前用户操作的样式都会被重置掉。 例如我勾选了几个商品准备结算，又修改了商品数量，这时候发起了请求，页面数据被渲染，打钩的商品全被恢复未选中。 想着将所有选中商品的独有Id存入数组，利用localStorage存储，每次刷新都取到存储的数...
localStorage和sessionStorage 2021.12.30
m0_57391092的博客
12-30 535
一、localStorage和sessionStorage的异同点（Html5新特性） 相同点： 1.都保存在客户端。 2.只能存储字符串类型。 3.以键值对的形式保存数据。 不同点： localStorage：本地存储，永久性存储，除非用户自己清除。 sessionStorage：会话存储，临时性存储，生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么存储的数据也会被清空。 语法： setItem(key, value) —— 保存数据，以键值对的方式存储信息 get.
前端 SessionStorage：实现数据临时存储的最佳选择
最新发布
AI架构全栈开发实战笔记
05-01 856
随着单页应用（SPA）和富客户端应用的普及，前端需要更高效的临时数据存储方案。SessionStorage作为Web Storage API的重要组成部分，提供了浏览器会话级别的数据存储能力，适用于表单临时缓存、路由状态管理、临时会话数据等场景。本文将从技术原理、使用规范、实战案例等维度，系统解读SessionStorage的核心特性及工程化应用方法。背景知识：明确存储需求与技术选型依据核心概念：对比主流存储方案，解析SessionStorage特性操作指南：提供完整的API使用手册及最佳实践。
java 字符串缓冲区 数组类,基本数据类
jiuliangtan的博客
12-14 587
1,StringBuffer线程安全的可变字符序列.一个类似于string的字符串缓冲区,但不能修改.虽然在任意时间点上他都包含某种特定的序列,但通过某些方法的调用可以改变该序列的长度和内容可在字符串缓冲区安全的应用于多个线程构造方法StringBuffer s = new StringBuffer(); //构建一个不带字符的字符串缓冲区,初始容量16 StringBuffer s1 =
sessionStorage使用
peade的博客
12-02 6710
sessionStorage在MDN里的描述是这样的： sessionStorage 属性允许你访问一个 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原...
利用sessionStorage存储 JSON 对象和数组
小金子J的博客
07-02 652
Web 开发中，sessionStorage 提供了一种在浏览器会话期间存储数据的方法。它仅接受字符串，因此需将对象或数组转换为 JSON 字符串。存储时使用 JSON.stringify()，读取时用 JSON.parse() 转换回原格式。此技巧适用于临时数据存储，如用户填写表单时的数据保护，确保数据在会话期间的持续性和安全性。
网站页面间脚本传值 sessionStorage
weixin_33759269的博客
07-10 276
sessionStorage、localStorage详解webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage。在JavaScript语言中可通过 window.sessionStorage 或 sessionStorage 调用此对象。 localStoragelocalStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除...
sessionStorage的用法
scorpion_V的博客
08-02 2292
sessionStorage的存储方法
localStorage && sessionStorage 存储/缓存数据
weixin_40030173的博客
02-27 495
localStorage存储 我们通过以下方式将数据储存到localStorage中 window.localStorage.setItem('key',value) 但有时value为一个对象Object,以上面的方式写入,会出现读取的返回值为{object Object}的情况,但这并不是我们想要的,此时我们需要使用新的方式 传入Object window.localStorage.setI...
sessionStorage用法
weixin_58414196的博客
02-16 689
sessionStorage浏览器关闭后数据回丢失 1.保存数据-------sessionStorage.setItem("key", "value"); 2.读取数据-------var lastname = sessionStorage.getItem("key"); 3.删除指定键的数据-------sessionStorage.removeItem("key"); 4.删除所有数据------- sessionStorage.clear(); ...
sessionStorage使用方法
热门推荐
我的技术博客
08-28 5万+
前段时间项目时遇到一个问题,iframe弹框中分页跳转时多选框中选中的值在跳转到第二页时数据无法保存,还好之前有前辈写过,拿着他的参考,省了我查找资料的时间,他使用的方法将数据先保存至sessionStorage,最后确定时再将数据从sessionStorage中渲染到父级页面.因为之前没有实战的经验, html5中的Web Storage包括了两种存储方式：sessionStorage和loc
H5的sessionStorage 存取。 localStorage存储对象，sessionStorage存储数组对象
dxj124的博客
09-18 3548
 // 用session存储数据 sessionStorage.setItem('key','value');  // 用session取数据 var f=sessionStorage.getItem('key'); 当存的是一个数组对象时，需要转成字符串存起来 sessionStorage.setItem('thematic_start', JSON.stringify(datas....
后端接收前端返回的字符串数组
02-21
### 如何在后端接收从前端发送的字符串数组 为了实现前后端之间的通信并成功传递字符串数组，通常采用HTTP请求的方式。前端通过POST方法将数据序列化为JSON格式传送给服务器，在后端则解析该JSON对象以获取所需的字符串数组。 假设使用Node.js作为后端技术栈，并利用Express框架简化路由配置： #### 前端准备 确保客户端能够正确构建AJAX请求并将JavaScript中的`Array<String>`转换成适合传输的形式——即JSON串行化的形式。可以借助于Fetch API完成这一操作[^1]。 ```javascript // JavaScript (Frontend) const data = ["apple", "banana", "cherry"]; fetch('/receive', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ items: data }) }) .then(response => response.json()) .then(data => console.log('Success:', data)) .catch((error) => console.error('Error:', error)); ``` #### 后端设置 对于接收到的数据包，需先安装必要的依赖库如body-parser用于解析来自请求体的内容。之后定义相应的API接口来捕获这些信息并作出响应。 ```bash npm install express body-parser cors ``` 接着编写简单的Express应用逻辑如下所示： ```javascript // Node.js with Express (Backend) const express = require('express'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.json()); // Support json encoded bodies app.use(cors()); app.post('/receive', function(req, res){ const receivedItems = req.body.items; // Process the incoming string array as needed... console.log(receivedItems); res.status(200).send({ message: `${receivedItems.length} item(s) successfully processed.`, status: true, timestamp: Date.now() }); }); app.listen(3000, () => console.log('Server running on port 3000')); ``` 此代码片段展示了如何建立一个基本的服务端点/receive专门用来处理含有字符串列表的消息。当有匹配路径的POST请求到达时，它会自动提取payload里的items字段对应的值作为一个新的本地变量存储起来以便后续加工或记录日志等用途；最后返回给调用方一条确认消息表示已接受到指定数量的对象实例[^2]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值