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

如何使用localstorage和Jquery从多个单击事件中使用存储值的数组生成一个对象键

使用localstorage和Jquery从多个单击事件中使用存储值的数组生成一个对象键的方法如下:

  1. 首先,我们需要创建一个空的对象,用于存储键值对。
  2. 在每个单击事件中,将需要存储的值添加到一个数组中。
  3. 使用localstorage将该数组存储在浏览器的本地存储中。
  4. 当需要生成对象键时,从localstorage中获取存储的数组。
  5. 使用Jquery的each方法遍历数组,将数组中的值作为对象的键,同时给予一个默认的值。
  6. 最后,将生成的对象用于后续的操作。

以下是一个示例代码:

代码语言:txt
复制
// 创建空对象
var obj = {};

// 单击事件1
$('#button1').click(function() {
  var value = 'value1';
  // 将值添加到数组中
  var arr = JSON.parse(localStorage.getItem('myArray')) || [];
  arr.push(value);
  // 存储数组到localstorage
  localStorage.setItem('myArray', JSON.stringify(arr));
});

// 单击事件2
$('#button2').click(function() {
  var value = 'value2';
  // 将值添加到数组中
  var arr = JSON.parse(localStorage.getItem('myArray')) || [];
  arr.push(value);
  // 存储数组到localstorage
  localStorage.setItem('myArray', JSON.stringify(arr));
});

// 生成对象键
$('#generate').click(function() {
  // 从localstorage获取存储的数组
  var arr = JSON.parse(localStorage.getItem('myArray')) || [];
  // 创建空对象
  var obj = {};
  // 使用Jquery的each方法遍历数组
  $.each(arr, function(index, value) {
    // 将数组中的值作为对象的键,同时给予一个默认的值
    obj[value] = 'default value';
  });
  // 使用生成的对象进行后续操作
  console.log(obj);
});

这段代码中,我们使用了localstorage来存储值的数组,并使用Jquery的each方法遍历数组生成对象键。在每个单击事件中,将需要存储的值添加到数组中,并将数组存储在localstorage中。当需要生成对象键时,从localstorage中获取数组,并使用each方法遍历数组生成对象。最后,可以使用生成的对象进行后续的操作。

请注意,这只是一个示例代码,实际应用中可能需要根据具体需求进行适当的修改和扩展。

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

相关·内容

HTML5游戏开发实战–当心

closePath函数将会最新路径终点到路径起点之间绘制一条直线,用于闭合路径。 18.在JavaScript,能够使用Math.random()函数生成随机数。...它总是返回0~1之间一个浮点数。这个数大于等于0且小于1。 有两种经常使用方式来使用random函数。一种是在给定范围内生成随机数。 还有一种是生成true或false布尔。...parseInt( ” 010 ” )会返回8作为结果而不是10. 22.通过本地存储技术保存载入数据。能够使用localStorage对象setItem函数来保存数据。...localStorage.getItem ( key );该函数返回给定存储。 当试图获取不存在时它会返回null。 23.本地存储限制大小。...当设置一个-对到localStorage时,假设超出限制,浏览器会抛出一个QUOTA_EXCEEDED_ERR异常。

1.8K10

JavaScriptJQuery基本使用

前言 这是前端JavaScriptJQuery基础使用,对于日常使用来说,这些代码足够了。我写代码时候经常忘记,写下常用代码,用时候直接看这些,免得再去百度了。...[index]);//输出"" } 3、for of 对数组迭代 for(value of list){ console.log(value)//输出数组对应 } ---- 事件监听 HTML...) $("#text_input").bind("input propertychange", function (e) { console.log("a") }); 2、jqueryjs如何判断...jquery对象 $(js对象) ---- 页面跳转 在原来窗体中直接跳转用 window.location.href="你所要跳转页面"; 在新窗体打开页面用: window.open('你所要跳转页面...'); window.history.back(-1);返回上一页 ---- json处理 如果json是由数组,那么parse()解析后,会变为json数组使用json[数字]来获取数据,由对象变来的话

24030

看不完那种!前端170面试题+答案学习整理(良心制作)

29.$.map()$.each()区别 .map()方法用来遍历操作数组对象,返回一个数组; .map()方法适用于将数组对象每个项目映射到一个数组。...33.jquery事件冒泡,怎么执行,如何停止冒泡事件 事件冒泡里面往外面开始传递。...$(this)this关键字在jquery不同 $(this)返回一个jQuery对象,可以对它调用多个jQuery方法,比如用text()获取文本,用on()绑定事件等。...如何jQuery动态添加新元素,如何给新生产元素绑定事件 jQueryhtml()可以给当前元素添加新元素。直接在元素还未生成前就绑定事件肯定是无效,因为所绑定元素目前根本不存在。...所以可以用live方法来动态绑定事件。 113.使用jQuery动画 hide()show()可以同时修改多个样式属性,如高度,宽度,不透明度。

11.4K50

JavaScript IndexedDB 完整指南

数据在 web 应用程序无处不在 —— 用户交互创建数据、查找数据、更新数据删除数据。如果没有存储这些数据方法,就不可能允许用户交互跨多个 web 应用程序使用保持状态。...幸运是,有几种关于如何在浏览器存储数据工具,可以在线离线访问数据。 1....通常当服务器响应一个请求时,它们可能包含一个 SET-COOKIE 头,给浏览器一个存储。然后,客户端应该在未来请求头中包含这个 cookie,这将允许服务器识别浏览器会话等。...open 方法将返回一个具有多个属性对象,包括 onerror、onupgradenneeded onsuccess,每个属性都接受一个回调函数,在相关事件发生时执行。...最后要处理 request.onsuccess 事件,该事件在数据库连接存储全部设置配置之后运行。你可以利用这个机会提取 todo 列表并将它们注入到我们数组

1.9K20

前端学习资料整理

离线情况下,浏览器就直接使用离线存储资源。 详细使用请参考:有趣HTML5:离线存储 请描述一下 cookies,sessionStorage localStorage 区别?...当解释器寻找引用时,会首先检索其 在栈地址,取得地址后获得实体 Javascript如何实现继承?...我们在网页某个操作(有的操作对应多个事件)。例如:当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到行为。...jQuery.fninit方法返回this指的是什么对象?为什么要返回this? jquery如何数组转化为json字符串,然后再转化回来?....delegate()则是更精确小范围使用事件代理,性能优于.live() .on()则是最新1.9版本整合了之前三种方式事件绑定机制 JQuery一个对象可以同时绑定多个事件,这是如何实现

3.4K20

JavaScript IndexedDB 完整指南

数据在 web 应用程序无处不在——用户交互创建数据、查找数据、更新数据删除数据。如果没有存储这些数据方法,就不可能允许用户交互跨多个 web 应用程序使用保持状态。...幸运是,有几种关于如何在浏览器存储数据工具,可以在线离线访问数据。 1....通常当服务器响应一个请求时,它们可能包含一个 SET-COOKIE 头,给浏览器一个存储。然后,客户端应该在未来请求头中包含这个 cookie,这将允许服务器识别浏览器会话等。...open 方法将返回一个具有多个属性对象,包括 onerror、onupgradenneeded onsuccess,每个属性都接受一个回调函数,在相关事件发生时执行。...最后要处理 request.onsuccess 事件,该事件在数据库连接存储全部设置配置之后运行。你可以利用这个机会提取 todo 列表并将它们注入到我们数组

1.5K10

JQuery最全常用方法指南

JQuery Traversing 方法说明 eq(index) 匹配元素集合取得一个指定位置元素,index0开始 filter(expr) 返回与指定表达式匹配元素集合,可以使用”,”号分割多个...map(callback) 将jQuery对象一组元素利用callback方法转换其,然后添加到一个jQuery数组。 not(expr) 匹配元素集合删除与指定表达式匹配元素。...slice(start, [end]) 匹配元素集合取得一个子集,内建数组slice方法相同。 add(expr) 把与表达式匹配元素添加到jQuery对象。...(array, callback) 使用某个方法修改一个数组项,然后返回一个数组 jQuery.inArray(value, array) 返回value在数组位置,如果没有找到,则返回...可以有多个参数(合并多项并返回) $.map(array, fn):数组映射。把一个数组项目(处理转换后)保存到到另一个数组,并返回生成数组

10.9K31

我碰到那些面试题js及es6(1)

JQ中选择器实现原理 JQuery 其实就是在一个匿名自调用函数内来实现把JQuery 作为 window 对象方法,这样,当我们想使用 JQuery 时候,就可以通过 window.JQuery...区别 map方法返回一个数组数组元素为原始数组调用函数处理后。...在敏捷开发,软件项目在构建初期被切分成多个子项目,各个子项目的成果都经过测试,具备可视、可集成可运行使用特征。...换言之,就是把一个大项目分为多个相互联系,但也可独立运行小项目,并分别完成,在此过程软件一直处于可使用状态。 如何实现浏览器内多个标签页之间通信?...数据结构(set实例成员唯一存储key,map实例存储键值对(key-value)) (1) Set 类似于数组,但数组可以允许元素重复,Set 不允许元素重复 (2)Map 类似于对象,但普通对象

2.3K21

JQuery JavaScript常用API整理(前端入门必学)

现在MVVM框架逐渐占据了主要市场,很多老项目也逐渐jQuery转向了MVVM架构!JQuery还有必要学吗? 我答案是jQuery必须学!...of for in 循环,不仅可以循环对象,还可以遍历数组, in 为下标值 for of 循环 const item of list 获取为集合每个对象 var list = [{.../* 数组: 删除最后一个元素 .pop() .slice(begin,end); 删除begin开始元素不包括end;返回被删除元素,不改变原来数组....concat(arr) 合并两个数组,返回一个数组,不改变原来数组 .join() 默认,来分割数组每个元素,返回一个字符串 .forEach(function...如果没有满足测试函数,则返回 undefined。 filter() 方法创建一个包含所有通过测试函数元素数组。如果没有元素满足测试函数,则返回一个数组

67820

求职 | 史上最全web前端面试题汇总及答案2

说明:至于如何对比,就是每次数组取出一个元素,然后到对象中去访问这个属性,如果能访问到,则说明重复。...sessionStoragelocalStorage不会 sessionStoragelocalStorage存储空间更大; sessionStoragelocalStorage有更多丰富易用接口...; sessionStoragelocalStorage各自独立存储空间; Ajax 1、什么是Ajax?...④ajaxSetup:设置调用ajax方法时默认。 ⑤getJSON:专门用于向服务器请求json格式数据便捷方法。 7、如何使用服务器获取一个复杂数据(对象)?...⑤逻辑角度来看,多线程意义在于一个应用程序,有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立应用,来实现进程调度管理以及资源分配。这就是进程线程重要区别。

6K20

第二章 你第首个Electron应用 | Electron in Action(中译)

web storage APIs存储响应 localStorage一个简单/存储,内置在浏览器并持久保存之间会话。...您可以在任意存储简单数据类型,如字符串和数字。让我们设置另一个帮助函数,它将从标题URL生成一个简单对象使用内置JSON库将其转换为字符串,然后使用URL作为存储它。...如果你还记得,localStorage一个/存储。我们可以使用对象。获取对象所有。我们必须为自己提供另一个帮助函数来将所有链接localStorage取出。...localStorage所有数组 return Object.keys(localStorage) <---+ .map(key => JSON.parse(localStorage.getItem...在我们简单应用程序,区别很简单。我们希望所有的链接都在默认浏览器打开。这个应用程序中正在添加删除链接,因此我们在linksSection元素上设置了一个事件监听器,并允许单击事件弹出。

4.6K30

HTML5 学习总结(三)——本地存储localStorage、sessionStorage、WebSqlDataBase、IndexedDB)

Indexed Database通过直接执行同步或者异步函数调用来检索树状对象存储引擎。索引数据库API避开了查询字符串,它使用底层API支持将直接存储在javascript对象。...存储在数据库可以通过使用索引获取到,并且可以使用同步或异步方式访问API。索引数据库也限定在同源范围内。...一个重要作用 有了数据库后我们自然希望创建一个表用来存储数据,但indexedDB没有表概念,而是objectStore,一个数据库可以包含多个objectStore,objectStore是一个灵活数据结构...也就是说一个objectStore相当于一张表,里面存储每条数据一个相关联。...选择类型不同,objectStore可以存储数据结构也有差异 不使用—>任意,但是没添加一条数据时候需要指定参数 keyPath—>Javascript对象对象必须有一属性作为键值 keyGenerator

7.4K100

jquery对象dom对象相互转换

.innerHTML; 3、如何获取jQuery集合某一项 对于获取元素集合,获取其中某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回jquery对象,而...//返回表单输入框value $("input").val("test");   //将表单输入框value设为test $("#msg").click();   //触发id为msg元素单击事件...=['#f00','#0f0','#00f'][i]}) //为三个不同p元素单击事件分别设定不同处理 jQuery几个自定义事件: (1)hover(fn1,fn2):一个模仿悬停事件(鼠标移动到一个对象上面...一个匹配元素(添加)删除绑定事件。...可以有多个参数(合并多项并返回) $.map(array, fn):数组映射。把一个数组项目(处理转换后) 保存到到另一个数组,并返回生成数组

3.3K40

2020最新前端面试题_2020年前端面试题

new关键字,this指向new出来对象事件,this指向触发这个事件对象 6、js数组对象遍历方式 for in for forEach for-of 7、map与forEach区别...25、vuejQuery区别 jQuery使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作, 其实原生HTML区别只在于可以更方便选取操作DOM对象, 而数据界面是在一起....number 自动将用户输入转化为数值类型 .trim 自动过滤用户输入收尾空格 键盘事件修饰符 .enter .tab .delete (捕获“删除”“退格”) .esc .space...safari隐藏模式下:localStorage.getItem会报错,建议统一使用try-catch封装 3、sessionStorage用于本地存储一个会话(session)数据, 这些数据只有在同一个会话页面才能访问并且当会话结束后数据也随之销毁...项目的整体看 目用户使用方式复杂 不同身份用户有不同使用方式(比如普通用户管理员) 多个用户之间可以协作 与服务器大量交互,或者使用了 WebSocket View 要从多个来源获取数据 组件角度看

6.6K10

Jquery 使用技巧总结

2、jQuery对象与dom对象转换 只有jquery对象才能使用jquery定义方法。注意dom对象jquery对象是有区别的,调用方法时要注意操作是dom对象还是jquery对象。...value设为test $("#msg").click(); //触发id为msg元素单击事件 $("#msg").click(fn); //为id为msg元素单击事件添加函数...=['#f00','#0f0','#00f']}) //为三个不同p元素单击事件分别设定不同处理 jQuery几个自定义事件: (1)hover(fn1,fn2):一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象...: 事件绑定与反绑定 一个匹配元素(添加)删除绑定事件。...可以有多个参数(合并多项并返回) $.map(array, fn):数组映射。把一个数组项目(处理转换后)保存到到另一个数组,并返回生成数组

2.8K20
领券