Question

当用户单击按钮时，它将在LocalStorage中存储一些值，如果用户再次单击同一按钮，它将在LocalStorage中再次存储相同的值，我如何删除或避免在LocalStorage中重复相同的值？
谁能帮我一下：）

HTML：

<a onclick="AddToCart('ae90ac1a-64c4-49a7-b588-ae6b69a37d47');">Add to Cart</a>
<a onclick="AddToCart('3e58aa74-4585-4bee-b2e0-ed39a1d95442');">Add to Cart</a>

JavaScript：

function AddToCart(varer) {
   var itemsLocalStorage = JSON.parse(localStorage.getItem("itemsline") || "[]");
    itemsLocalStorage.push(varer);
    localStorage.setItem("itemsline", JSON.stringify(itemsLocalStorage));
}

LocalStorage（在用户单击之前）：

[]

LocalStorage（当用户单击时）：

["ae90ac1a-64c4-49a7-b588-ae6b69a37d47"]

LocalStorage（当用户再次单击时）：

["ae90ac1a-64c4-49a7-b588-ae6b69a37d47","ae90ac1a-64c4-49a7-b588-ae6b69a37d47"]

我尝试使用filter，但由于某种原因它无法正常工作：

itemsLocalStorage = itemsLocalStorage.filter(e => e === varer);

Answer 1

从localStorage中获取数组，如果尚未在该数组中找到该值，则将该值推送到该数组，然后如果我们推送该值，则更新localStorage。

var array = JSON.parse(window.localStorage.getItem("itemsline")) || [];//the "|| []" replaces possible null from localStorage with empty array
var value = "some value";
if(array.indexOf(value) == -1){
    array.push(value);
    window.localStorage.setItem("itemsline", JSON.stringify(array));
}

这是相同代码的一个版本，可以更清楚地说明其工作方式：

//All values stored in localStorage are strings.
//Grab our itemsline string from localStorage.
var stringFromLocalStorage = window.localStorage.getItem("itemsline");

//Then parse that string into an actual value.
var parsedValueFromString = JSON.parse(stringFromLocalStorage);

//If that value is null (meaning that we've never saved anything to that spot in localStorage before), use an empty array as our array. Otherwise, just stick with the value we've just parsed out.
var array = parsedValueFromString || [];

//Here's the value we want to add
var value = "some value";

//If our parsed/empty array doesn't already have this value in it...
if(array.indexOf(value) == -1){
    //add the value to the array
    array.push(value);

    //turn the array WITH THE NEW VALUE IN IT into a string to prepare it to be stored in localStorage
    var stringRepresentingArray = JSON.stringify(array);

    //and store it in localStorage as "itemsline"
    window.localStorage.setItem("itemsline", stringRepresentingArray);
}

Answer 2

获取临时数组，然后检查重复的值。

var arr = ["ae90ac1a-64c4-49a7-b588-ae6b69a37d47","ae90ac1a-64c4-49a7-b588-ae6b69a37d47"]
function squash(arr){
var tmp = [];
for(var i = 0; i < arr.length; i++){
    if(tmp.indexOf(arr[i]) == -1){
    tmp.push(arr[i]);
    }
}
return tmp;
}

console.log(squash(arr));

Answer 3

您可以使用过滤器 array.filter((item, index) => array.indexOf(item) === index)

const array = ["ae90ac1a-64c4-49a7-b588-ae6b69a37d47","ae90ac1a-64c4-49a7-b588-ae6b69a37d47"];
const filteredArray = array.filter((item, index) => array.indexOf(item) === index);

console.log(filteredArray)

Answer 4

您可以使用js的Set对象，它仅在唯一时才添加值

 var array = JSON.parse(localStorage.getItem("items")) || [];
let set =new Set(array)
set.add(newValue)
const toArr=Array.from(set)
localStorage.setImem("items",JSON.stringify(toArr))

如何删除或避免LocalStorage中的重复值

4 个答案: