javascript - localStorage - 循环遍历 javascript 中特定键的值

Question

这可能很难解释，所以我会尽力而为。

我正在尝试以某种方式使用本地存储，但我什至不确定它是否可能。 基本上我想以列表的形式提交一些值。 当用户重新加载时，它会从本地存储中提取这些值并显示它们。

理想情况下，我想将每个值存储在同一个键下，并尝试循环该键并打印与该键关联的值。 正如您所看到的，当我重新加载时，它会加载数组中的每个字母，因为它查看整个值的长度而不是每个单词的长度。

我知道我有点偏离，但这是我所能做到的。希望有任何提示(我从未使用过 localStorage，所以它对我来说有点新)

考虑一下:

    var i = 0;
    var taskArray = [];
    var storedTasks = localStorage.getItem('Tasks');

  for( i = 0; i < localStorage.length; i++)
    $("#tasks").append("<li id='task-"+ i +"'>" + storedTasks[i] + "</li>");


     // Add a task
    $("#tasks-form").submit(function() {
        if ($("#task").val() != "") {
             $("#tasks").append("<li id='task-" + i + "'>"  + '<span class="taskSpan">' + $("#task").val() + '</span>' + '</li>')
            $("#task-" + i).css('display', 'none');
            $("#task-" + i).fadeIn(350);
            taskArray.push($("#task").val());
            localStorage.setItem('Tasks', taskArray);
            i++;

        }

        return false;
    });

JSFiddle

Answer 1

无论您推送到 localStorage 的数据类型是什么，它最终都会转换为字符串。这意味着您从 localStorage 中提取的任何内容都必须转换回您期望的任何数据类型。

在本例中，由于您使用的是字符串，因此您将迭代视为通过字符数组而不是字符串数组进行的迭代。

要转换回数组，只需按分隔每个单词的“,”进行拆分即可:

var storedTasks = localStorage.getItem('Tasks');
var storedTasksArray = storedTasks.split(',');

现在，迭代storedTasksArray，每个索引都指向一个单词而不是字母。

顺便说一句，为了让您的生活不那么复杂，如果您要使用大量 localStorage，您可以考虑执行 typeof value 并将类型也存储在 localStorage 中，然后当您提取数据时，您将拥有一些元数据，可用于在插入之前将其转换回数据类型。