I am trying to build a little web app using local storage. I can add and delete items . I want to add new item to local storage but I always fail. When i try to add a new item it always show "no localStorage in window".

So I edit it (still not works) :

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>

I am trying to build a little web app using local storage. I can add and delete items . I want to add new item to local storage but I always fail. When i try to add a new item it always show "no localStorage in window".

So I edit it (still not works) :

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>

• javascript
• local-storage

• Why do you include sessionStorage in your code? Isn't it better to concentrate on localStorage which is the topic of the question? – aknuds1 Commented Feb 22, 2014 at 0:03
• Im not really keen on javascript but I search on internet so I found this and that code works so I use him. – George Simon Commented Feb 22, 2014 at 0:05
• It'd be better if you included only localStorage for this particular question, so one wouldn't try to solve two problems at once. Also, what do you mean by "no something in window"? Do you mean "no localStorage in window"? – aknuds1 Commented Feb 22, 2014 at 0:10
• What browser and version of that browser are you using? – OregonTrail Commented Feb 22, 2014 at 0:17
• Google Chrome , version : 32.0.1700.107 m – George Simon Commented Feb 22, 2014 at 0:19

1 Answer 1

Given that localStorage isn't defined in window, your browser probably doesn't support it. See Mozilla's browser patibility matrix for reference.

I've concocted a jsFiddle for you try:

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

If you try this fiddle, you should see a list of localStorage items. It works for me (Chrome 33.0.1750.117 m).