Local storage techniques


Local storage is the part of web storage; it is a elegant technique of storing data. This way is better then cookies and another traditional way; Local storage looks very easy but in practical scenario it is create lot of problem to developer. So in this tutorial we will cover local storage related problems. We have cover basic use of local storage and session storage inside Web storage tutorial.

Note – We need to remember that local storage store all data in string form so we have to aware about this.

So as we discuss in web storage chapter

localStorage.setItem("no", 1);
console.info(typeof localStorage.getItem("no")); // string

// Solution
console.info(typeof +localStorage.getItem("no")); // number

But suppose that it is a array value. Here first of we need to stringify the array then we will store array when we need to get array in that case we will parse to return string from local storage.

var arr = ["one", "two", "three"];
localStorage.setItem("array", arr);
localStorage.getItem("array"); // "one,two"; again it is a string value of array

// Solution
localStorage.setItem("array", JSON.stringify(arr));
console.log(JSON.parse(localStorage.getItem("array"))); //["one", "two", "three"]

What about the objects

var obj = { msg: "Hi, I am msg" };
localStorage.setItem("object", obj);
localStorage.getItem("object"); // "[object Object]"

// Solution
localStorage.setItem("object", JSON.stringify(obj));
console.log(JSON.parse(localStorage.getItem("object"))); // { msg: "Hi, I am msg" }

If we want to test the key is exist in web storage –

function isKeyExist(obj, key) {
    return !!obj.getItem(key);

localStorage.setItem("count", 1);

var hasKey = isKeyExist(localStorage, "count");

console.log(hasKey); // true

You May Also Like

About the Author: admin