Question

我正在尝试将变量保存在数组中。这些变量由用户写入，并在按下按钮时保存到localStorage。在我的另一个html页面上，我到达了这些变量，并将它们放在3个不同的数组中（变量在三个数组中）。然后，用户输入新文本并保存到变量中。现在解决问题。新创建的变量不会添加到数组中，而是会被替换。我在想这是由于变量名相同，但是我找不到解决方案。

我试图更改变量名称等以保存新变量，但找不到解决方案。

//This is html page 2 (gets the items from localhost)
var TankaKostnadVar = localStorage.getItem("StorageKostnadVar");
var TankaLiterVar= localStorage.getItem("StorageLiterVar");
var TankaDatumVar = localStorage.getItem("StorageDatumVar");

var arrayKostnad = [];
var arrayLiter = [];
var arrayDatum = [];
arrayKostnad.push(TankaKostnadVar,);
arrayLiter.push(TankaLiterVar,);
arrayDatum.push(TankaDatumVar,);
document.write(arrayLiter,arrayKostnad,arrayDatum); //Ignore this, just test

//This is the code where the user is writing and it saves to localStorage.
//Html page 1 that saves the variables
var TankaKostnadVar = document.getElementById("tankaKostnad").value;
var TankaLiterVar = document.getElementById("tankaLiter").value;
var TankaDatumVar = document.getElementById("tankaDatum").value;

localStorage.setItem("StorageKostnadVar", TankaKostnadVar);
localStorage.setItem("StorageLiterVar", TankaLiterVar);
localStorage.setItem("StorageDatumVar", TankaDatumVar);

我希望数组添加变量。因此，如果用户写入5，则数组应首先为[5]，然后，当用户写入8时，数组应为[5,8]

Answer 1

如果要继续添加到数组，则需要在追加新元素之后将存储在内存中的整个数组推送到localStorage。另外，localStorage仅存储字符串值，因此，如果要维护Array结构，则必须在运行JSON.stringify()之前使用setItem()，然后在下次使用{{ 1}}。

JSON.parse()

这就是我要清理的东西...

getItem()

Answer 2

如果不想使用JSON，则可以将字符串逗号分隔保存，并在必要时将项目转换为数字。要转换数字，可以使用地图功能或for。 Localstorage只保存字符串，因此，如果需要返回数字，则需要使用JSON.parse或使用parseInt函数，这是全局的。

//Retrieve saved items from localstorage
var TankaKostnadVar = localStorage.getItem("StorageKostnadVar"); // "1,2"
var TankaLiterVar = localStorage.getItem("StorageLiterVar");
var TankaDatumVar = localStorage.getItem("StorageDatumVar");

TankaKostnadVar += "," + document.getElementById("tankaKostnad").value;
TankaLiterVar   += "," + document.getElementById("tankaLiter").value;
TankaDatumVar   += "," + document.getElementById("tankaDatum").value;

localStorage.setItem("StorageKostnadVar", TankaKostnadVar);
localStorage.setItem("StorageLiterVar", TankaLiterVar);
localStorage.setItem("StorageDatumVar", TankaDatumVar);

// if you want to transform TankaKostnadVar and others two, just do like this
TankaKostnadVar.split(','); // result: ['1', '2']

// if you want to transform to number
TankaKostnadVar = TankaKostnadVar.split(',').map( function(number) { 
    return parseInt(number) 
} );

字符串的拆分功能，将字符串拆分成一个字符串分隔的部分。在这种情况下，用逗号分隔字符串。因此“ 1,2”变成['1'，'2']。

Answer 3

您只是在使用localStorage.setItem，它会使用给定的key保存您的值。如果键存在，它将替换该值。在进行.setItem之前，请先从本地存储中获取值，然后将其解析为数组，以便最终将新的用户输入推入该解析的数组。然后，您可以.setItem替换localStorage中的“过时”值。

更新示例：

很抱歉，没有给出任何示例。在这里：

// Get array from local storage
const stringifiedArray = localStorage.getItem('myCollection');

// If there is no 'myCollection' from localStorage, make an empty array
const myCollection = stringifiedArray ? JSON.Parse(stringifiedArray) : [];

myCollection.push('My new item added'); // update array
localStorage.setItem('myCollection', JSON.stringify(myCollection)); // save

我的变量不会保存在数组中，会被替换吗？帮我

3 个答案: