将多个用户输入保存到本地存储中

Question

我想知道是否有人可以帮助我进行本地存储。我希望能够将多个用户值存储到本地存储中并单独显示它们，以便它们可以用作按钮/链接。下面是我尝试过的一些代码：

    locatArray = new Array();

    function save() {
        var fieldValue = document.getElementById("input").value;
        var locatItem = locatArray.push(fieldValue);

        localStorage.setItem("text", JSON.stringify(locatArray));
    }

    window.onload = function load() {
        var storedValue = JSON.parse(localStorage.getItem("text"));
        if(storedValue) {
            document.getElementById("display").innerHTML = (storedValue);
        }

此代码允许用户在一个键中存储多个值。然而，由于它是一个数组，当页面被刷新并且用户输入不同的数据时，本地存储值被覆盖。此外，不能单独访问每个值。

我是使用本地存储的新手，我想知道是否有人可以帮助我。

Answer 1

您需要更新数据而不是覆盖它。实现一些同步机制，首先从 localStorage 获取数据，然后推送新项目并再次更新存储它，而不是覆盖存储的数据。

如果你想删除一些项目做同样的事情。从 localStorage 中获取数组，然后删除您不再需要的项目，然后将数组再次存储在 localStorage 中。

使用您的代码： weather_urls 作为密钥。

这将更新存储在 localStorage 中的数组

function save() {
    var fieldValue = document.getElementById("input").value;

    var arrayOfLinks = localStorage.getItem("weather_urls");
    if(!arrayOfLinks){
        arrayOfLinks = []; // this is better way how to declare array not new Array()
    }
    arrayOfLinks.push(fieldValue);
    localStorage.setItem("weather_urls", arrayOfLinks);
}

window.onload = function load() {
    var storedValue = localStorage.getItem("weather_urls");
    if(storedValue) {
        document.getElementById("display").innerHTML = storedValue;
    }