Javascript localStorage unshift 数组在两个项目后停止追加

Javascript localStorage unshift array stops appending after two items

本文关键字：项目 两个 追加 unshift localStorage 数组 Javascript      更新时间：2023-09-26

我有一个在页面加载时触发的javascript函数。我的目标是像这样将 json 字符串存储在 localStorage 中，"item1","item2","item3"使用 unshift 方法一次在数组中构建一个项目。

这是我的函数在这里的样子：

function storedItems (){
    var modelItem = $('#item').html(),
        modelInt = $('#int').html();
    if (localStorage.modelItem || localStorage.modelInt) {
        var itemStack = [],
            intStack = [],
            itemStorage = localStorage.getItem("modelItem"),
            intStorage = localStorage.getItem("modelInt"),
            itemHistory = JSON.parse(itemStorage),
            intHistory = JSON.parse(intStorage),
            item = JSON.stringify(itemHistory).split(","),
            int = JSON.stringify(intHistory).split(",");
        alert("History " + item + " " + int + " " + item.length + " " + int.length);
        if (item.length > 0) {
            for ( var i = item.length - 1; i >= 0; i--) {
                var obj = item[i],
                    newItem = JSON.parse(obj);
                if(item.length > 1 && item.length < 3) {
                    itemStack.unshift(newItem);
                    itemStack.unshift(modelItem);
                    alert("StringFinder 2 " + modelItem + " " + itemStack);
                } else {
                    newItem.unshift(modelItem);
                    alert("StringFinder 2 " + modelItem + " " + itemStack);
                }
            }
        }
        if (int.length > 0) {
            for ( var i = int.length - 1; i >= 0; i--) {
                var obj = int[i],
                    newInt = JSON.parse(obj);
                if(int.length > 1 && int.length < 3) {
                    intStack.unshift(newInt);
                    intStack.unshift(modelInt);
                    alert("StringFinder 2 " + modelInt + " " + intStack);
                } else {
                    newInt.unshift(modelInt);
                    localStorage.setItem("modelInt", JSON.stringify(newInt));
                    alert("StringFinder 2 " + modelInt + " " + intStack);
                }
            }
        }
        localStorage.setItem("modelItem", JSON.stringify(itemStack));
        localStorage.setItem("modelInt", JSON.stringify(intStack));
        alert("StringFinder 4 " + itemStack + " " + intStack);
    } else {
        localStorage.setItem("modelItem", JSON.stringify(modelItem));
        localStorage.setItem("modelInt", JSON.stringify(modelInt));
    }
}

我可以"item1","item2"得到这个结果，但如果它第三次触发，脚本会在第一个历史记录警报触发后失败。我基本上被难住了。我一直在寻找解决方案，并与其他一些人合作，试图弄清楚但没有成功。请尽你所能提供帮助。

您遇到的错误的原因在这里：

localStorage.setItem("modelItem", JSON.stringify(modelItem));
localStorage.setItem("modelInt", JSON.stringify(modelInt));

您正在对字符串值进行 JSON 编码并将其存储在本地存储中，因此当您将它们从本地存储中取出并解析它们时，它们仍然是字符串，而不是数组。

首先，您需要将它们存储为数组：

localStorage.setItem("modelItem", JSON.stringify([modelItem]));
localStorage.setItem("modelInt", JSON.stringify([modelInt]));

我已经让你的代码进入工作状态，你可以在这里尝试一下：

http://jsfiddle.net/5qad1nwe/1/

为了将来参考，正如我几个小时前指出的那样，如果你想在这里得到一个体面的答案，你必须提炼出你的问题的本质。在许多情况下，这种返工和简化代码的行为通常可以让您自己解决问题，而无需询问。

以下是您如何提出此问题并获得快速答案(以及可能的赞成票(的示例

<小时 />

我在 localStorage 中存储和检索值时遇到问题。当它们尚未在 localStorage 中定义时，我第一次存储这些值(它们只是常规字符串值，没有多大重要性(，然后下次我从 localStorage 访问它们时，我想将它们作为数组检索，将其内容与另一个值一起复制到另一个数组，并重新存储值：

var modelItem = $('#item').html();
if (localStorage.modelItem ) {
    var itemStack = []
        itemStorage = localStorage.getItem("modelItem"),
        itemHistory = JSON.parse(itemStorage);
    console.log("itemHistory.length is " + itemHistory.length);
    for (var i = 0; i < itemHistory.length; i++) {
        itemStack.unshift(itemHistory[i]);
    }
    itemStack.unshift(modelItem);
    localStorage.setItem("modelItem", JSON.stringify(itemStack));
} else {
    localStorage.setItem("modelItem", JSON.stringify(modelItem));
}

但是，当我第一次从 localStorage 加载数据时，itemHistory.length 不是我预期的 1，而是实际上更大的值。我做错了什么？

这是我自己答案的解决方案。对于混乱，我深表歉意。我在这里简化并修复了它。

var modelItem = $('#item').html();
if (localStorage.modelItem) {
itemStorage = localStorage.getItem("modelItem");
itemHistory = JSON.parse(itemStorage);
alert(itemHistory.length);
if (itemHistory.length > 0) {
    if(itemHistory.length < 3) {
        itemHistory.unshift(modelItem);
        alert("StringFinder 2 " + itemHistory);
    } else {
        itemHistory.unshift(modelItem);
        itemHistory.pop();
        alert("StringFinder 3 " + itemHistory);
    }
}
localStorage.setItem("modelItem", JSON.stringify(itemHistory));
alert("StringFinder 4 " + itemHistory);
} else {
var itemStack = new Array();
itemStack.unshift(modelItem);
localStorage.setItem("modelItem", JSON.stringify(itemStack));
}

这是最新的 JSFiddle

相关文章：