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

有没有办法在vanilla Javascript中存储之前点击过的元素

在vanilla JavaScript中,可以使用localStorage或sessionStorage来存储之前点击过的元素。

localStorage是一种持久化存储的机制,数据会一直保存在浏览器中,除非手动清除或代码删除。可以通过localStorage.setItem(key, value)方法将数据存储到localStorage中,其中key是存储的键名,value是存储的值。可以使用localStorage.getItem(key)方法来获取存储的值,localStorage.removeItem(key)方法来删除指定的键值对。

sessionStorage是一种会话级别的存储机制,数据只在当前会话中有效,关闭浏览器标签页或浏览器后数据会被清除。使用方法与localStorage类似,可以使用sessionStorage.setItem(key, value)方法存储数据,sessionStorage.getItem(key)方法获取数据,sessionStorage.removeItem(key)方法删除数据。

下面是一个示例代码,演示如何在vanilla JavaScript中使用localStorage存储之前点击过的元素:

代码语言:txt
复制
// 获取之前存储的点击元素
var clickedElements = localStorage.getItem('clickedElements');

// 如果之前有存储的点击元素,则进行相应处理
if (clickedElements) {
  // 将存储的点击元素转换为数组
  clickedElements = JSON.parse(clickedElements);
  
  // 遍历点击元素数组,进行相应处理
  clickedElements.forEach(function(elementId) {
    var element = document.getElementById(elementId);
    // 进行点击元素的处理逻辑
    // ...
  });
}

// 监听点击事件,将点击的元素存储到localStorage中
document.addEventListener('click', function(event) {
  var elementId = event.target.id;
  
  // 如果点击的元素有id,则进行存储
  if (elementId) {
    // 获取之前存储的点击元素
    var clickedElements = localStorage.getItem('clickedElements');
    
    // 如果之前没有存储的点击元素,则创建一个空数组
    if (!clickedElements) {
      clickedElements = [];
    } else {
      // 如果之前有存储的点击元素,则将其转换为数组
      clickedElements = JSON.parse(clickedElements);
    }
    
    // 将点击的元素id添加到数组中
    clickedElements.push(elementId);
    
    // 将更新后的点击元素数组存储到localStorage中
    localStorage.setItem('clickedElements', JSON.stringify(clickedElements));
  }
});

这是一个简单的示例,演示了如何在vanilla JavaScript中使用localStorage存储之前点击过的元素。根据具体需求,可以根据实际情况进行相应的修改和扩展。

腾讯云相关产品和产品介绍链接地址:

请注意,以上仅为示例链接,具体产品和解决方案选择应根据实际需求和情况进行评估和决策。

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

相关·内容

每个前端开发者都可以拥有属于自己命令行脚手架

是因为最近一直搞Strve.js生态,自己捣鼓框架同时也学到了很多东西。所以就本篇文章给大家介绍一种更加方便灵活命令行脚手架工具,以及如何发布到NPM上。...之前,我也写过类似的开发命令行工具文章,但是核心思想都是通过代码远程拉取Git仓库项目模板代码。有时候会因为网速原因导致拉取失败,进而会初始化项目失败。 那么,有没有比这个更好方案呢?...我在想,如果我把create-vite这种思路应用到我自己脚手架工具是不是很Nice! 实战 所以,二话不说,就抓紧打开ViteGitHub地址。...kolorist是一个将颜色放入标准输入/标准输出小库。我们之前那些模板交互文本会看到它们显示不同颜色,这正是它功劳。...虽然,我们成功本地创建了自己一个模板,但是,我们只能本地创建。也就是说你换台电脑,就没有办法执行这个创建模板命令。 所以,我们要想办法去发布到云端,这里我们发布到NPM上。

1.1K30

如何制作自己原生 JavaScript 路由

但实际上,这些库和框架仍然使用 vanilla JavaScript。那么该怎么实现呢? 我希望这个“JavaScript 路由教程”能够帮你了解如何用原生 JS 写出自己路由。...只要你了解实现它所涉及所有部分,就可以相对容易原生 JavaScript 创建自己路由。...每当在浏览器地址栏输入新 URL,但我们不想刷新页面时,就会发生这种情况,我们只是想通过加载新内容来刷新视图。 你可以选择将路由存储 routes[] 数组。...JavaScript History API 我看过很多没有提到 JavaScript History API vanilla JS router 教程。...我们只需将存储元素 id 属性 clicked 元素 id 传递给它即可:home,about,gallery 等。它们应与你要导航到实际页面一致。

3.8K20
  • 使用 Vanilla JavaScript 框架创建一个简单天气应用

    大家好,不知道大家听说 Vanilla JavaScript 这款 框架吗?...最近我浏览国外一些技术网站时,这个词出现频率实在是太高了,好多框架都宣称自己是基于 Vanilla JavaScript。那到底什么是 Vanilla JavaScript 呢?...Vanilla JS 是一个快速、轻量级、跨平台JavaScript框架。我们可以用它构建强大JavaScript应用程序。...提示信息文本默认是没内容,只有特定条件下才能显示,比如城市名称不正确或者重复输入已查询城市信息。...API 接口提供,在后面的代码我们需要替换成我们个性化图标 .city-name 元素里面,我们添加 data-name 自定义属性,其值包含了 cityName,countryCode,主要方便我们处理重复请求已搜索城市

    1.6K30

    使用 Vanilla JavaScript 框架创建一个简单天气应用

    大家好,不知道大家听说 Vanilla JavaScript 这款框架吗?...最近我浏览国外一些技术网站时,这个词出现频率实在是太高了,好多框架都宣称自己是基于 Vanilla JavaScript。那到底什么是 Vanilla JavaScript 呢?...Vanilla JS 是一个快速、轻量级、跨平台JavaScript框架。我们可以用它构建强大JavaScript应用程序。...提示信息文本默认是没内容,只有特定条件下才能显示,比如城市名称不正确或者重复输入已查询城市信息。...API 接口提供,在后面的代码我们需要替换成我们个性化图标 .city-name 元素里面,我们添加 data-name 自定义属性,其值包含了 cityName,countryCode,主要方便我们处理重复请求已搜索城市

    1.6K20

    JavaScript编码之路【ES6新特性之 Symbol 、Set 、Map、迭代器、生成器】

    当你使用Symbol.for()召唤他时候,他会首先翻阅他记事本,看看你是不是之前就已经拜访他,如果是的话,他就会带着他上次面孔再次出现。...Set集合 ES6之前,我们存储数据结构主要有两种:数组、对象。 ES6新增了另外两种数据结构:Set、Map,以及它们另外形式WeakSet、WeakMap。 2.1....所以存储到WeakSet对象是没办法获取; 那么这个东西有什么用呢?...Map基本使用 另外一个新增数据结构是Map,用于存储映射关系。 但是我们可能会想,之前我们可以使用对象来存储映射关系,他们有什么区别呢?...JavaScript,生成器定义方式是函数前加一个星号(*),并且函数体内可以使用yield关键词来暂停函数。

    10720

    001. 两数之和 | Leetcode题解

    但是,你不能重复利用这个数组同样元素。...不过这样时间复杂度为 O(N^2),空间复杂度为 O(1),时间复杂度较高,我们要想办法进行优化。 这里我们可以增加一个 Map 记录已经遍历数字及其对应索引值。...利用数组存储差值索引位来减少一次遍历,降低时间复杂度为O(n); 用 hashMap 存储遍历元素和对应索引。 每遍历一个元素,看看 hashMap 是否存在满足要求目标数字。...关键点 求和转换为求差 借助 Map 结构将数组每个元素及其索引相互对应 以空间换时间,将查找时间从 O(N) 降低到 O(1) 代码 语言支持:JavaScript /** * @来源: Javascript...]; // prevNums获取目标元素索引 if (targetNumIndex !

    72310

    不敢相信,技术栈,居然被P站秒了

    使用ES来解决搜索问题; (5)服务用是go; (6)大数据体系用Vertica; 画外音:Vertica是一款基于列存储,支持PB级别结构化数据存储数据库。..."> 而Vanilla JS不需要任何引用,部署引用时候,只需要: 你没看错,没有任何代码,由于它过于流行,所有的浏览器都必须内置它。...答:我们一直支持IE,但最近我们决定放弃支持IE11之前IE版本(兼容性太难搞了),言下之意,我们会放弃对Flash视频播放支持。我们将专注于Chrome,Firefox和Safari支持。...提问:你们播放器,除了播放相对可控视频资源,你们还引入了很多第三方广告,开发过程,你们是如何模拟这些动态脚本加载?...,有没有哪些技术是希望改进

    1.8K10

    视差滚动效果实现

    官网适当使用视差效果,可以增加视觉吸引力,提高用户参与度,从而提升网站和品牌形象。本文通过JavaScript、CSS多种方式并在React框架下进行了视差效果实现,供你参考指正。...2、Transform 3D CSS 中使用 3D 变换效果,通过将元素划分至不同纵深层级,滚动时相对视口不同距离元素,滚动所产生位移视觉上就会呈现越近元素滚动速度越快,相反越远元素滚动速度就越慢...为方便理解,你可以想象正开车行驶公路上,汽车向前移动,你转头看向窗外,近处树木一闪而过,远方群山和风景慢慢渐行渐远,逐渐视野消失,而天边太阳却只会在很长一段距离细微移动。...如下是 React 实现示例,通过监听滚动事件,封装统一视差组件,来达到多样动画效果。...以下是一些你可以尝试主流组件库: rellax (Lightweight, vanilla javascript parallax library) react-scroll-parallax framer-motion

    12120

    一道有意思面试算法题

    找出那个只出现了一次元素。 初步解法 这道题第一眼看过去,思路挺简单,我们只需要维护一个对象来记录每一个元素出现次数,使用元素值作为key,元素出现次数作为value。...那么有没有办法可以只使用原来数组来实现这个功能呢? 最终解法 我们可以思考下,一个数组里,所有的数字都出现两次,除了一个我们要找数字只出现一次。那么,我们有没有办法将两个相同数字给过滤掉呢?...好啦,不卖关子了,之前有了解的人应该就知道解决方案了,如果之前没了解这方面东西的人,可以继续往下看。...而javascript按位异或(即^操作)操作,则会对两个数字相应每一对比特位执行异或操作。...当然,最重要还是多学习、多刷题、多看书。这样才能不断进步。 本文地址->本人博客地址, 欢迎给个 start 或 follow

    90750

    「译」JavaScript 究竟是如何工作?(第二部分)

    内存堆 image.png Orinoco logo:V8 垃圾回收器 每当你 JavaScript 程序定义了一个变量、常量或者对象时,你都需要一个地方来存储它。这个地方就是内存堆。...下面是一些会导致你程序出现内存泄漏常见错误: 全局变量:如果你不断地创建全局变量,不管有没有用到它们,它们都将滞留在程序整个执行过程。如果这些变量是深层嵌套对象,将会浪费大量内存。...移除 DOM 元素:这个问题很常见,类似于全局变量导致内存泄漏。DOM 元素存在于对象图内存和 DOM 树。...调用栈 栈是一种遵循 LIFO(先进后出)规则数据结构,用于存储和获取数据。JavaScript 引擎通过栈来记住一个函数中最后执行语句所在位置。...如果我运行多个耗时阻塞操作,例如 HTTP 请求,那么程序必须得每一个操作得到响应之后才能执行后面的代码。 为了解决这个问题,我们需要找到一种可以单线程下异步完成任务办法

    49510

    忍者级别的操作JavaScript函数

    所以这里,我们主要是介绍JavaScript函数运用。 点击原文地址,跳转至github原文地址 匿名函数 对于什么是匿名函数,这里就不做过多介绍了。...截图自《JavaScript忍者秘籍》 通过完善之前对匿名函数粗略定义,我们可以修复解决这个问题。匿名函数,我们不在使用显示ninja引用。...函数存储 有时候,我们可能需要存储一组相关但又独立函数,事件回调管理是最为明显例子。向这个集合添加函数时候,我们得知道哪些函数集合存在,否则不添加。 ?...但是javascript并非如此,javaScript,我们重载函数时候只有一个实现。只不过这个实现内部是通过函数实际传入参数特性和个数来达到相应目的。 ?...由于此时这个ninja是一个新对象,所以不必担心之前创建方法。 第二次调用addMethod时候,首先将之前同名函数保存到一个变量old,然后将新创建匿名函数作为方法。

    66031

    【算法】如何确定图(Graph)里有没有环(Cycle)?

    从算法原理开始 用眼睛看起来很简单事情,如何用程序来实现呢? 动手编程之前,我们首先要想清楚如何做,也就是说我们先要能够找到一个用自然语言可以描述办法,来确定无向图中是否有环。...我们搜索引擎输入“判断无向图有没有环”这个查询语句,然后看到很多相关搜索结果。 ? 我们直接点击第一个。看到了下面这个文章。 ?...正式实现算法之前,我们先要进行数据处理,也就是我们需要将表达无向图矩阵读取到内存。 这里又涉及到该数据磁盘存储问题。我们就用最简单方式,将邻接矩阵直接存储为 csv 文件,就像这样: ?...接着计算每个节点度,将它们存储degrees列表里,用一个循环,每个循环对用矩阵一行,然后 sum函数将该行中所有的元素相加。...这里还要注意一件事情,我们算法最终要判断有多少节点入队,但是队列本身要不断地压入弹出,里面不可能保留所有入节点。所以要用一个专门列表存储每个入队元素。就是这个visited。 ?

    8.8K20

    python爬虫笔记:开始前准备

    ,这些程序将爬取到数据分类整理存储到数据数据库,然后通过网站前端页面显示出网站标题、简介之类信息,并提供了这些网站网址让用户可以通过点击直接访问某一个网站。...比如我现在需要一张北京到郑州火车票,一直买不到,没得办法只能时不时刷新一下网页看有没有余票,但是人工刷新很难有那么好运气能刷,所以这个时候就需要用到爬虫模拟人工,几秒钟刷新一次然后监控余票数值是否发生了变化...image.png image.png 浏览器作用就是将这些代码解析为相应样式,前端开发者实际开发过程往往是写了一个样式之后就需要通过浏览器实时预览效果,并通过工具进行调整,浏览器按下...image.png image.png 点击这个小箭头让它处于激活状态后原网页中用鼠标选择一个元素,即可快速定位到这个元素源代码位置以及显示CSS样式信息。...不同的人在看时候存储数据用是小脑瓜,程序用是硬盘。 还有一个不同点在于程序并不在意这个网页长什么样,很明显他们都是直男,只会在网页源代码找自己需要东西。

    66020

    JavaScript 常见内存泄漏

    什么是内存泄漏 JavaScript 是一种垃圾回收语言,垃圾回收语言通过周期性地检查之前被分配内存是否可以从应用其它部分访问来帮助开发者管理内存。...查看内存泄漏 chrome 可以通过 performance Memory record 来查看,选中 Memory 后点击左边 Record,然后模拟用户操作,一段时间后点击 stop...常见内存泄漏 《JavaScript高级程序设计》中提到了一种内存泄漏:由于 IE9 之前版本对 JS 对象和 DOM 对象中使用垃圾回收机制,会导致如果闭包作用域链中保存着一个 HTML 元素... JavaScript 非严格模式,未定义变量会自动绑定在全局对象上(window/global),比如: function foo () { bar = 'something' }...解决办法,使用严格模式。 虽然全局变量上绑定变量无法被垃圾回收,但是有时需要使用全局变量去存储临时信息,这个时候要格外小心,并在变量使用完毕后设置为 null,以回收内存。

    83620

    怎样编写更好 JavaScript 代码

    TS vanilla JS 体验之上增加了一个全面的可选类型系统。很长一段时间里,整个 JS 生态系统对 TS 支持不足以让我觉得应该推荐它。...这也提供了一种简洁分享、交流架构方案方法。 TS 出现之前,也存在解决这个问题其他方案,但是没有一个能够真正解决它,并且还需要你做额外工作。...这并不意味着存储该引用内容永远不会改变。对于原始类型(数字,布尔等),const 确实转化为不变性(因为它是单个内存地址)。... JavaScript ,只有绝对必要时才应使用传统 for 循环。...Prettier 不会对使用 var 提出异议,但会自动对齐代码所有括号。开发过程将代码推送到 Git 之前,总是处理得很漂亮。

    1.3K30

    Transformer-XL 超长上下文注意力模型

    Vanilla Transformer Language Models 我们公众号之前也有跟大家分享阅读理解竞赛内容,处理任意长文本时候,因为有限算力和内存,通常做法是把长文本分割成短片段比如...训练过程,当处理新Fragment时候,之前计算hidden_state已经被修补存储起来,会作为context信息来进行重用。...Relative Positional Encodings 在上述循环机制,有一点问题没有解决。就是重用之前片段信息时,我们如何保持原来位置编码信息。...之前Transformer中介绍一个片段,我们会根据token片段位置,将这个位置对应tokenembedding和位置编码相加,因此位置编码是与token位置对应绝对编码。...这样就会遇到问题,当我们重用之前片段信息时,前一个片段和本片段相同位置使用是同样位置编码,没有办法区分。为了避免这种情况发生,本文提出了一种解决方案。 使用相对位置编码替代绝对位置编码。

    92120

    JavaScript使用前言

    7、alert弹窗: 我们访问网站时候,有时会突然弹出一个小窗口,上面写着一段提示信息文字。如果你不点击“确定”,就不能对网页做任何操作,这个小窗口就是使用alert实现。...窗口有没有状态栏 11、循环: for循环、while循环、do while循环都和Java是一样。...星期三","星期四","星期五","星期六"]; //定义数组对象,给每个数组项赋值 var mynum=mydate.getDay();//返回值存储变量mynum document.write...4、Array数组对象: (1)、一维数组: js数组存储数据可以是任何类型(数字、字符、布尔值等),定义数组方式如下: var myarr=new Array(); //定义数组 myarr...2、History对象: history对象记录了用户曾经浏览页面(URL),并可以实现浏览器前进与后退相似导航功能。

    2.6K20

    Qwik带来简洁高效Astro开发

    可以在他网站 paulie.dev 上找到更多关于 Paul 信息。 我们开始之前,有个免责声明: 我非常喜欢 React,但有时候我真的用不上它。...但有时,我确实需要一点客户端 JavaScript 来实现交互。在这时,我发现自己普通 Vanilla JavaScript 和 React 之间难以抉择。...一方面,Vanilla JavaScript 通常比 React 更轻量,但维护起来可能会变得困难。...完整解释可以 Qwik 文档中找到:component。 状态与信号(State vs. Signal) 在下面的示例点击按钮将 isVisible 值设置为 true 或 false。...状态与存储 在下面的示例,+ 按钮将火箭添加到数组,- 按钮删除最后添加项。每次修改数组时,页面都会更新以反映更改。 您可以在下面的链接查看这个 Qwik 组件源代码和预览。

    19910
    领券