June 8, 2019

LocalStorage API in Javascript

By Krishnaa JavaScript Questions 0 Comments

A quick video tutorial about local storage api in Javascript. I hope you will like it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
     <div>
         <input type="text" placeholder="key" id="storageKey">
         <input type="text" placeholder="value" id="storageValue">
         <button onclick="setStorage()">Submit</button>
         <button onclick="removeStorage()">Remove</button>
     </div>

    <script src="script.js"></script>
</body>
</html>

function setStorage(){
    // const key = document.querySelector('#storageKey').value;
    // const value = document.querySelector('#storageValue').value;
    // localStorage.setItem(key, value);

    const myObject =  {
        name: 'peter',
        id: 123
    };

    localStorage.setItem('abc', JSON.stringify(myObject));
}


window.addEventListener('load', ()=>{
    let value = localStorage.getItem('abc');
    console.log(JSON.parse(value));
});


function removeStorage(){
    localStorage.clear();
}

You May Also Like: