时间戳

首页 > 解决方案 > JS/jQuery 本地存储数组

javascript - JS/jQuery 本地存储数组

问题描述

目前我有这个多个按钮data-id和data-name

这是我的想法和示例代码

$(".clickCompare").click(function ({
      var id = $(this).attr('data-id');
      var name = $(this).attr('data-name');           

      var datas = [id , name];
      localStorage["datas"] = JSON.stringify(datas);
      var stored_datas = JSON.parse(localStorage["datas"]);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" class="clickCompare btn btn-primary" data-id="1" data-name="Sample1">Compare</button>
<button type="button" class="clickCompare btn btn-primary" data-id="2" data-name="Sample2">Compare</button>
<button type="button" class="clickCompare btn btn-primary" data-id="3" data-name="Sample3">Compare</button>

我想要做的是在每次点击类时存储data-idand data-nameon 变量。这样我就可以随时给他们打电话。datasclickCompare

如果 ID 已经存在，它将不会存储在变量中datas

标签： javascriptjquerystringify

解决方案

我认为您想要做的是保存一组对象（元组）。在这种情况下，数据应该类似于

let datas = [{id: 1, name: 'first'}, {id: 2, name: 'second'}];

因此，每次单击时，您都可以在数组中添加一个新项目。为此，您可以检查数组中是否有具有该 ID 的项目。使用这样的功能

$(".clickCompare").click(() =>{
    let id = $(this).attr('data-id');
    let name = $(this).attr('data-name');  
    let datas = [];

    if(localStorage.key('datas')){
        datas = JSON.parse(localStorage.getItem('datas'));
    }

    if(!datas.filter(x => x.id == id)){
        datas.push({id: id, name: name});
    }

    localStorage.setItem('datas', JSON.stringify(datas));
    console.log(localStorage.getItem('datas')); //to remvoe after testing
});

推荐阅读