首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何用javascript保存一个带有数组数组的对象到后退

使用JavaScript保存一个带有数组的对象到后退可以通过以下步骤实现:

  1. 创建一个包含数组的对象:
代码语言:txt
复制
var obj = {
  name: "John",
  age: 30,
  hobbies: ["reading", "coding", "gaming"]
};
  1. 将对象转换为JSON字符串:
代码语言:txt
复制
var jsonString = JSON.stringify(obj);
  1. 使用sessionStoragelocalStorage将JSON字符串保存到浏览器的会话存储或本地存储中:
代码语言:txt
复制
sessionStorage.setItem("myObject", jsonString);

代码语言:txt
复制
localStorage.setItem("myObject", jsonString);
  1. 当需要恢复对象时,从会话存储或本地存储中获取JSON字符串,并将其转换回对象:
代码语言:txt
复制
var storedJsonString = sessionStorage.getItem("myObject");

代码语言:txt
复制
var storedJsonString = localStorage.getItem("myObject");
代码语言:txt
复制
var storedObj = JSON.parse(storedJsonString);

这样,你就可以使用JavaScript保存一个带有数组的对象到后退,并在需要时恢复该对象。请注意,sessionStoragelocalStorage的区别在于数据的生命周期和作用域,具体选择哪个取决于你的需求。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JavaScript数组求和_js获取对象数组一个元素

Javascript数组 要查找两个数字Java和数组,请使用array.reduce()方法。reduce()方法将数组简化为单个值。...该ARR 是一个可选参数。它是当前元素所属数组对象。 该 初值 是一个可选参数。它是要作为初始值传递给函数值。 首次将回调称为 total, 并且 currentValue 可以是两个值之一。...如何在JS示例中找到数组和 让我们定义一个具有五个值数组,然后使用array.reduce()方法找到该数组总和。...在最后一个循环中,我们旧值为97,下一个值为18,因此97 + 18 = 115。 因此,这就是将数组所有元素求和方式。...发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

6.9K20

JavaScript】内置对象 - 数组对象 ④ ( 索引方法 | 查找给定元素一个索引 | 查找给定元素最后一个索引 | 索引方法案例 - 数组元素去重 )

Array 数组对象参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array...一、索引方法 1、查找给定元素一个索引 - indexOf() 调用 Array 数组对象 indexOf() 方法 可以 查找给定元素一个索引 , 语法如下 : indexOf(searchElement.../Web/JavaScript/Reference/Global_Objects/Array/indexOf 代码示例 : // 创建数组对象 let arr = [9,...() 调用 Array 数组对象 lastIndexOf() 方法 可以 查找给定元素最后一个索引 , 语法如下 : lastIndexOf(searchElement) lastIndexOf(...就是 在数组中 最后一个 被找到 指定元素 索引位置 , 如果没有找到返回 -1 ; 参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

16110
  • JavaScript交互式网页设计 • 【第3章 JavaScript浏览器对象模型】

    状态栏文本 window 对象常用方法 方法 说明 prompt 显示可提示用户输入对话框 alert 显示带有一个提示消息和一个确定按钮警示框 confirm 显示一个带有提示信息、确定和取消按钮的确认框...location 对象 3.3.1 history对象 history对象保存了当前浏览器窗口中打开页面的一个历史记录列表,使用 history对象可以将当前浏览器页面跳转到某个曾经打开过页面 方法...描述 back() 后退一个页面,相当于浏览器后退按钮 forward() 前进一个页面,相对于浏览器前进按钮 go() 打开一个指定位置页面 可以使用 history.go(-1) 和 history.go...但不同浏览器支持不同对象,因此对于不同浏览器,要使用不同对象来检测 集合 描述 返回对文档中所有嵌入式对象引用 plugins[] 该集合是一个 plugin 对象数组,其中元素代表浏览器已经安装插件...alert() 方法:显示带有一个提示消息和一个“确定”按钮警示框 confirm() 方法:显示一个带有提示信息、“确定”和“取消”按钮的确认框 open() 方法:打开一个浏览器窗口,

    79210

    JavaScript BOM

    "; window.location=""; Window对象常用方法方法名称说明prompt( )显示可提示用户输入对话框alert( )显示带有一个提示信息和一个确定按钮警示框confirm...( )显示一个带有提示信息、确定和取消按钮对话框close( )关闭浏览器窗口open( )打开一个浏览器窗口,加载给定 URL 所指定文档setTimeout( )在指定毫秒数后调用函数或计算表达式...()返回带有指定名称对象集合getElementsByTagName()返回带有指定标签名对象集合write()向文档写文本、HTML表达式或JavaScript代码定时函数超时调用:setTimeout...Math对象随机数:Math.random():返回一个01之间随机浮点数。...以下代码生成一个0100之间随机整数:int result = (int) (Math.random() * 100);System.out.println(result);Date对象创建Date

    78020

    JS-JavaScript学习笔记(一)

    比如:var i=5; var j=”5″; var k=i+j; 结果:k=55 3.运算符优先级(由高低) 算术操作符->比較操作符->逻辑操作符->”=”赋值操作符 ,假设同级运算按从左到右次序进行...并能够实现浏览器前进与后退相似导航功能。 a.window.history.[属性|方法] b. 属性length 。返回浏览器历史列表中URL数量 c....方法:back() ,载入History列表中一个URL ,相当于go(-1) ; forward() 载入History列表中下一个URL ,相当于go(1) ; go(number-要訪问URL...DOM 将HTML文档呈现为带有元素、属性和文本树结构(节点树)。 (1).getAttribute(name)方法 -通过元素节点属性名称获取属性值。...2. name:要想查询元素节点属性名字 (2).setAttribute()方法 -添加一个指定名称和值新属性,或者把一个现有的属性设定为指定值。

    32420

    $set用法 | 可用于修改对象数组一个对象、 可用于更新数据视图

    一、vue中修改数组对象数组一个对象对象结构如下: sections: [ { id: 0, addInputBool: true,...,修改数组里某一个对象。...最开始我想法就是将数值一个一个赋值进数组,和写Java代码一样思维。...$set来进行操作 解决: // 数组:第一个参数是要修改数组, 第二个值是修改下标或字段,第三个是要修改成什么值 this....$set用法 // 数组:第一个参数是要修改数组, 第二个值是修改下标或字段,第三个是要修改成什么值 // 对象:第一个参数是要修改对象, 第二个值是修改属性字段,第三个是要修改成什么值 Vue.set

    2.5K10

    Android开发人员不得不学习JavaScript基础(二)

    1、window对象 window对象是BOM核心,window对象指当前浏览器窗口,window对象中有很多种方法供开发者调用: 方法 描述 alert() 显示带有一段消息和一个确认按钮警告框...取消setTimeOut值 2、history对象 history对象记录了用户曾经浏览过页面(URL),并可以实现浏览器前进与后退相似导航功能。...6.2、文本节点:向用户展示内容,入li中JavaScript、DOM、CSS等文本。 6.3、属性节点:元素属性,a标签链接属性href="http:xxx.xxx.xxx"。...insertBefore() 将一个给定节点插入一个给定元素节点给定子节点前面 removeChild() 从一个给定元素中删除字子节点 replaceChild(ele) 把一个给定元素里一个子节点替换成另外一个节点...6.5、getElementsByTagName()方法,返回带有指定标签名节点对象集合。返回元素顺序是它们在文档中顺序。 Tagname是标签名称,p、a、img等标签名。

    74030

    JavaScript学习(三)

    JavaScript学习(三) JavaScript内置对象 JavaScript所有事物都是对象:字符串、数值、数值、函数等,每个对象带有属性和方法。 对象属性:反映该对象某些特定性质。...:字符串长度、图像长宽等。 对象方法:能在对象上执行操作。:表单提交,时间获取等。...访问对象属性语法: objectName.propertyName 访问对象方法语法: objectName.methodName() Date日期对象 日期对象可以存储任意一个日期,并且可以精确毫秒数...如果没有设置参数,则切分数组包括从start结束所有元素。 3、返回一个数组,包含从startend(不包含该元素)arrayObject中元素。...History对象 history对象记录了用户曾经浏览过画面(URL),并可以实现浏览器前进与后退相似导航功能。

    1.2K10

    Redis 数据结构 skiplist

    每次创建一个新跳跃表节点时候, 程序都根据幂次定律 (power law,越大数出现概率越小) 随机生成一个介于 1 和 32 之间值作为 level 数组大小, 这个大小就是层“高度”。...后退指针 节点后退指针(backward 属性)用于从表尾向表头方向访问节点: 跟可以一次跳过多个节点前进指针不同, 因为每个节点只有一个后退指针, 所以每次只能后退至前一个节点。...节点成员对象(obj 属性)是一个指针, 它指向一个字符串对象, 而字符串对象保存一个 SDS 值。...在同一个跳跃表中, 各个节点保存成员对象必须是唯一, 但是多个节点保存分值却可以是相同: 分值相同节点将按照成员对象在字典序中大小来进行排序, 成员对象较小节点会排在前面(靠近表头方向)...举个例子, 在图 5-7 所示跳跃表中, 三个跳跃表节点都保存了相同分值 10086.0 , 但保存成员对象 o1 节点却排在保存成员对象 o2 和 o3 节点之前, 而保存成员对象 o2 节点又排在保存成员对象

    43130

    JavaScript 网页脚本语言 由浅入深

    length  设置返回数组元素书名 方法 join()把数组所有的元素放入一个字符串,通过一个分隔符进行分隔      sort()对数组进行排序      push()向数组末尾添加一个或者更多元素...BOM可以实现功能 弹出新浏览器窗口 移动关闭浏览器窗口以及调整窗口大小 页面的前进和后退 Windows对象常用属性 属相名称   说明 histroy   有关客户访问过URL信息 location...显示可以提供用户输入对话框 alert()   显示带有一个提示信息和一个确定按钮警示款 confirm()  显示一个带有提示信息,确定和取消按钮对话框 close()   关闭浏览器窗口 open...reload()  重新加载当前文档 replace()  用新文档替换当前文档 getElementByld() 返回对拥有指定id一个对象引用 getEllementsByName 返回带有指定名称对象集合...6之间 getHours()  返回date对象小时数,其介于023之间 getminutes()  返回date对象分钟数其值介于059之间 getseconds()  返回date对象秒数

    1.8K100

    《闲扯Redis十》Redis 跳跃表结构实现

    备注: 按照分析顺序,本节应该说道有序集合对象了,但是考虑有序集合对象底层实现中使用到了跳跃表结构,避免在分析有序集合时造成突兀,所以本节先来看看 redis 中跳跃表结构具体实现。...节点成员对象(obj 属性)是一个指针, 它指向一个字符串对象, 而字符串对象保存一个 SDS (简单动态字符串,前面分析过)值。...在同一个跳跃表中,各个节点保存成员对象必须是唯一,但是多个节点保存分值却可以是相同:分值相同节点将按照成员对象在字典序中大小来进行排序,成员对象较小节点会排在前面(靠近表头方向),而成员对象较大节点则会排在后面...例如, 在图 5-7 所示跳跃表中, 三个跳跃表节点都保存了相同分值 10086.0 , 但保存成员对象 o1 节点却排在保存成员对象 o2和 o3 节点之前, 而保存成员对象 o2 节点又排在保存成员对象...zslIsInRange 给定一个分值范围(range), 比如 0 15 , 20 28,诸如此类, 如果给定分值范围包含在跳跃表分值范围之内, 那么返回 1 ,否则返回 0 。

    83320

    前端核心JavaScript

    frames 如果页面中包含框架,则每个框架都拥有自己 window 对象,并且保存在 frames 集合中。...location对象 保存当前文档信息,将URL解析为独立片段 screen对象 存放着有关显示浏览器屏幕信息 navigator对象 navigator对象就是判断用户浏览器以及操作系统 history...对象 history属性 说明 history.back() 与在浏览器点击后退按钮相同 history.forward() 与在浏览器中点击按钮向前相同 history.go(参数) 前进后退功能,...参数如果是1前进一个页面,如果是-1后退一个页面,如果是N则前进或后退N个页面 history.length() 保存历史记录数量 # 事件处理   事件一般是用户对页面的一些“小动作”引起,例如按下鼠标...3、一般通过 call/apply/bind 方法显式调用函数时,函数体内this会被绑定指定参数对象 上 。 4、一般通过上下文对象调用函数时,函数体内this会被绑定对象上 。

    1.5K30

    如何制作自己原生 JavaScript 路由

    但实际上,这些库和框架仍然使用 vanilla JavaScript。那么该怎么实现呢? 我希望这个“JavaScript 路由教程”能够帮你了解如何用原生 JS 写出自己路由。...每当在浏览器地址栏中输入新 URL,但我们不想刷新页面时,就会发生这种情况,我们只是想通过加载新内容来刷新视图。 你可以选择将路由存储在 routes[] 数组中。...如果希望将路由集成本机浏览器体系结构中,那么对 history 和 history.pushState(JavaScript History API)基本了解至关重要。...使“后退”和“前进”按钮起作用 通过使用 history.pushState,你将自动使 Back 和 Forward 按钮导航到上一个或下一个状态。这样做会产生 popstate事件。...这是你必须再次更新视图部分。(第一次是我们单击按钮时。) 但是由于该事件带有单击 id,因此单击 Back 或 Forward 时很容易刷新视图并重新加载内容。

    3.9K20

    不管是顺序栈还是链式栈,入栈、出栈只涉及栈顶个别数据操作,所以时间复杂度都是O(1) 3.支持动态扩容顺序栈 要实现一个支持动态扩容栈,我们只需要在底层依赖一个支持动态扩容数组就可以了。...当栈满了以后,我们就申请一个更大数组,将原来数据搬迁到新数组中。 如下图: ? 对于出栈,因为不涉及内存重新申请和数据搬移,所以出栈时间复杂度仍是O(1)....5.栈在表达式求值中应用 这里我们将看下编译器如何利用栈来实现表达式求值。 实际上,编译器就是通过两个栈来实现。 其中一个保存操作数栈,另一个保存运算符栈。...当所有的括号都扫描完成后,如果栈为空,则说明字符串为合法格式; 否则,说明有未匹配左括号,为非法格式。 7.如何用栈实现浏览器前进、后退功能。 可以用两个栈来解决这个问题。...正式函数调用特点,根据数据结构是特定场景抽象原则,我们会优先考虑栈结构 2.我们都知道,JVM内存管理中有个“堆栈”概念。栈内存用来存储局部变量和方法调用,堆内存用来存储java中对象

    57530

    Redis面试(三):底层数据结构(二)

    unsigned int span;//x.level[i].span } level[]; } zskiplistNode;obj:各节点中o1,o2,o3是节点所保存成员对象节点成员对象一个指针...,指向一个字符串对象,而字符串对象保存一个SDS值。...节点后退指针(backward属性)用于从表尾向表头方向访问节点跟可以一次跳过多个节点前进指针不同,因为每个节点只有一个后退指针,所以每次只能后退至前一个节点。...level[i].forward:每个层都有一个指向表尾方向前进指针(level[i].forward属性),用于从表头向表尾方向访问节点level[i].span:表示节点x在第i层其下一个节点需跳过节点数...一个最简单 HashMap 就是一个数组数组每个元素是一个哈希桶(也叫做Bucket),第一个数组元素被编为哈希桶 0,以此类推。

    30440

    数据结构与对象

    SDS 所保存字符串长度 int len; // 记录 buf 数组中未使用字节数量 int free; // 字节数组,用于保存字符串 char buf[...当程序从表头向表尾进行遍历时,访问会沿着层前进指针进行。 后退(backward)指针:节点中用 BW 字样标记节点后退指针,它指向位于当前节点一个节点。...后退指针在程序从表尾向表头遍历时使用。 分值(score):各个节点中 1.0 、 2.0 和 3.0 是节点所保存分值。在跳跃表中,节点按各自所保存分值从小到大排列。...如果字符串对象保存一个字符串值, 并且这个字符串值长度小于等于 39 字节, 那么字符串对象将使用 embstr 编码方式来保存这个字符串值。...当服务器考虑将一个共享对象设置为键对象时, 程序需要先检查给定共享对象和键想创建目标对象是否完全相同, 只有在共享对象和目标对象完全相同情况下, 程序才会将共享对象用作键对象, 而一个共享对象保存值越复杂

    77420

    【Hybrid开发高级系列】AngularJS(二)——常用$服务

    $http服务是一个接受一个参数函数,参数类型是对象,用来配置生成http请求,该函数返回一个promise对象(关于promise规范,可以看看这篇文章) var promise = $http...headers: 一个列表,每个元素都是一个函数,返回http头     xsrfHeaderName(字符串):保存XSFR令牌http头名称     xsrfCookieName: 保存XSFR...$httpProvider 中有一个 interceptors 数组,而所谓拦截器只是一个简单注册到了该数组常规服务工厂。         ...promise.then(function(resp){     //resp是一个响应对象 }, function(resp){     //带有错误信息resp });         或者这样:...2.当出现以下情况时同步URL         * 改变地址栏         * 点击了后退按钮(或者点击了历史链接)         * 点击了一个链接     3.一系列方法来获取URL对象具体内容用

    42040

    vue-router 用法详解

    这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航相同路由、或在当前导航完成之前导航一个不同路由) 时候进行相应调用。...next(false): 中断当前导航。如果浏览器 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置 from 路由对应地址。...你可以向 next 传递任意位置对象,且允许设置诸如 replace: true、name: 'home' 之类选项以及任何用在 router-link to prop 或 router.push...abstract: 支持所有 JavaScript 运行环境, Node.js 服务器端。如果发现没有浏览器 API,路由会自动强制进入这个模式。...路由记录就是 routes 配置数组对象副本 (还有在 children 数组)。

    2.5K20

    JavaScript爬虫_速通物流

    JSON语法格式: 创建JSON数组和遍历 复杂一些JSON对象 三十六、 eval函数 面试题: ---- 一、前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家...①在引入外部脚本中又加alert,则这个不会生效 ②需要另外写一个才会生效 : 四、JavaScript变量 var 变量名; :var i; javascript是一门弱类型语言,没有编译阶段一个变量可以随意赋值。...Model(测览器对象模型) 关闭浏览器窗口、打开一个浏览器窗口、后退。...对象 json对象里面可以包含json对象,和数组之类数组用下标访问即可 访问对象用”.”即可访问,访问aihao中”drink”,user.address.aihao[1] <script

    8.4K10
    领券