Question

我有一个在页面加载时触发的javascript函数。我的目标是在localStorage中存储一个json字符串，就像这个"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"，但如果第三次触发，则在第一个“历史记录”警报触发后脚本失败。我基本上难过了。我一直在寻找解决方案，并与其他一些人一起努力解决问题而没有成功。请以任何方式帮助你。

Answer 1

您遇到的错误原因如下：

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，但实际上是一个更大的值。我做错了什么？

Answer 2

这是我自己答案的解决方案。我为这种困惑道歉。我在这里简化并修复了它。

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));
}

Here is the most recent JSFiddle

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

2 个答案: