javascript - 本地存储添加项目

Question

我正在尝试使用本地存储构建一个小型网络应用程序。我可以添加和删除项目。我想将新项目添加到本地存储，但我总是失败。当我尝试添加新项目时，它总是显示“窗口中没有本地存储”。

所以我编辑它(还是不行):

function addStorage() {
    var key = document.getElementById('storageKey');
    var data = document.getElementById('storageData');
    var nic = document.getElementById('storageNic');


    //localStorage setItem
    if ("localStorage" in window) {
        localStorage.setItem(key.value, data.value, nic.value);
        location.reload();
    } else {
        alert("no localStorage in window");
    }


function removeStorage() {
    var key = document.getElementById('removeKey');

    //localStorage removeItem
    if ("localStorage" in window) {
        if (localStorage.length > 0) {
            localStorage.removeItem(key.value);
            location.reload();
        }
    } else {
        alert("no localStorage in window");
    }


}

function clearStorage() {
    //localStorage clear
    if ("localStorage" in window) {
        if (localStorage.length > 0) {
            localStorage.clear();
            location.reload();
        }
    } else {
        alert("no localStorage in window");
    }


}


window.onload = function () {
    var localhtml = "";

    //localStorage key and getItembr
    for (var i = 0; i < localStorage.length; i++) {
        localhtml += "<li>" + localStorage.key(i) + " " + localStorage.getItem(localStorage.key(i)) + "</li>";
    }
    document.getElementById('localStorageData').innerHTML = localhtml;

}

HTML:

<script>
function addTextTag(text){
    document.getElementById('storageKey').value += text;
   } 
</script>
<input type="text" id="storageKey">
<input type="text" id="storageData">
<input type="text" id="storageNic">
<input type="button" id="save" value="SAVE" onclick="addStorage();return false;">
<input type="button" id="clear" value="Clear" onclick="clearStorage(); return false;">
<div id="localStorageData"></div>

Answer 1

鉴于 localStorage 未在 window 中定义，您的浏览器可能不支持它。请参阅 Mozilla 的 browser compatibility matrix供引用。

我编造了一个 jsFiddle为你尝试:

HTML

<input id="storageKey" value="key"></input>
<input id="storageData" value="value"></input>
<input id="storageNic" value="nic"></input>
<div id="localStorageData"></div>

JavaScript

function addStorage() {
    console.log("Add storage");
    var key = document.getElementById('storageKey');
    var data = document.getElementById('storageData');
    var nic = document.getElementById('storageNic');

    //localStorage setItem
    if ("localStorage" in window) {
        console.log("Setting item " + key.value + " to " + data.value +
                    " in localStorage");
        localStorage.setItem(key.value, data.value, data.
    } else {
        alert("no localStorage in window");
    }
}

function removeStorage() {
    var key = document.getElementById('removeKey');

    //localStorage removeItem
    if ("localStorage" in window) {
        if (localStorage.length > 0) {
            localStorage.removeItem(key.value);
            location.reload();
        }
    } else {
        alert("no localStorage in window");
    }
}

window.onload = function () {
    console.log("onLoad");
    var localhtml = "";

    addStorage();

    //localStorage key and getItembr
    for (var i = 0; i < localStorage.length; i++) {
        localhtml += "<li>" + localStorage.key(i) + " " +
            localStorage.getItem(localStorage.key(i)) + "</li>";
    }
    document.getElementById('localStorageData').innerHTML = localhtml;
};

如果你试试这个 fiddle ，您应该会看到 localStorage 项目的列表。它适用于我(Chrome 33.0.1750.117 m)。