持久化数组以在另一个html页面上使用

Question

我需要能够从数组中的信息显示。

选项由复选框选择，复选框存储在temporarySelection中，然后临时选择信息被传送到其他数组（例如，添加到restaurantSelection，然后清除以供下一个选择）。

我需要能够在单独的html页面上显示这些数组。

有4个不同的数组可以转移到第二个html页面，placeSelection，hotelSelection，restaurantSelections和sightSelections。

我已经环顾四周，尝试了一些不同的东西，但似乎没有任何工作。

有任何想法吗？

我已经尝试在函数中使用localstorage（虽然我可能没有把它完全正确）。

看着cookie，但我被告知不要这样做因为它是不必要的，因为只有Javascript才会使用它。

function chooseSelection(resultIndex) {

    var locationName = document.getElementById('locationName-' + resultIndex);

    if(!temporarySelection.includes(locationName.innerHTML)) {
        console.log('pushing ' + locationName.innerHTML + ' into 
        temporarySelection')
        temporarySelection.push(locationName.innerHTML);
    } else {
        var index = temporarySelection.indexOf(locationName.innerHTML);
        console.log('Removing index number: ', index)
        temporarySelection.splice(index, 1);
    }
}

我希望第二个html页面，“结果页面”将在4个单独的框中显示placeSelection，hotelSelection，restaurantSelections和sightSelections的数组。

Answer 1

不确定如何设置本地存储。下面是两个小函数，用于设置和获取存储中数组的值。

function setStore(temporarySelection){
    localStorage.setItem("temporarySelection", JSON.stringify(temporarySelection));
}

function getStore(){
        const temporarySelection  = localStorage.getItem("temporarySelection"); 
      if(temporarySelection)
      {
        return JSON.parse(temporarySelection)
      }
      else{
        return [];
      }
    }

以下是您正在使用这些函数的代码

function chooseSelection(resultIndex) {

    var locationName = document.getElementById('locationName-' + resultIndex);

    if(!temporarySelection.includes(locationName.innerHTML)) {
        console.log('pushing ' + locationName.innerHTML + ' into 
        temporarySelection')
        temporarySelection.push(locationName.innerHTML);
    } else {
        var index = temporarySelection.indexOf(locationName.innerHTML);
        console.log('Removing index number: ', index)
        temporarySelection.splice(index, 1);
    }
    setStore(temporarySelection)
}

现在，您可以在任何页面中使用getStore函数获取商店值。