Javascript localStorage unshift 数组在两项后停止追加答案

【问题标题】：Javascript localStorage unshift array stops appending after two itemsJavascript localStorage unshift 数组在两项后停止追加
【发布时间】：2014-12-23 23:21:11
【问题描述】：

我有一个在页面加载时触发的 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" ，但如果它第三次触发，脚本会在第一次历史警报触发后失败。我基本上被难住了。我一直在寻找解决方案，并与其他一些人一起试图解决这个问题，但没有成功。请以任何方式提供帮助。

【问题讨论】：

一旦你解析到数组，就不需要再对数组元素使用 JSON.parse 了。把它想象成你只使用 JSON 方法来存储和检索 localStorage ，然后你正在使用本机脚本数组/对象
@charlietfl 出于某种原因，当我选择不对解析的 json 进行字符串化时，我会为每个字符而不是每个字符串获得一个项目/整数长度。因此，我尝试再次对其进行解析，以便将其正确地转移到数组中。有没有更好的方法来获取数组的长度而不计算每个字符？
我建议你重新开始逻辑并记住从 localStorage 解析后你有一个对象或数组。所以你不需要item = JSON.stringify(itemHistory).split(","),之类的东西，如果有疑问，可以使用typeof来检查。
我的意思是它在解析时计算每个字母（例如：item.length 的结果将是 4 而不是 1）。
@OnlineOverlord 我很确定您无法在这里得到一个体面的答案是由于您无法（或者更确切地说，不愿意）提出一个体面的问题。请阅读我发布的 mcve 链接以供将来参考。如果您愿意调试并简化代码以解决问题的本质，那么您帖子中 80% 的代码可能会被省略，而您在几小时前就会得到答案。

标签： javascript arrays html local-storage

【解决方案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，而是一个更大的值。我做错了什么？

【讨论】：

谢谢你，但它对我不起作用。不过，您确实为我指明了正确的方向。这是jsfiddle with my solution。现在的代码比以前少了很多。我明白我的错误。感谢你们抽出时间帮助我了解我的错误。很抱歉造成误解。

【解决方案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

【讨论】：