How to store the add and edit values store in local storage in javascript?

Question

I am creating todo list to display sample static data. If I click button sample data append to the list one by one. When I click Delete Button deleted correctly. If i want to refresh the page given displayed data shows in the page and also I click the content to edit the content in the page after refresh the page the edited content displayed in the page. These values are displayed from the localstorage. My question is how to store the same inserted and edit values are stored in the local storage using javascript.. My sample code is Given

this my script to add and edit content. I want to create Local storage and and store the add and edit values store in the local storage.. After refresh the page Last created/edited values show in the List..

<button class="addbtn icon-plus" id="addnew" onclick="addSticky()">Add</button>
                <ul id="mynotes"></ul>    
var ul = document.getElementById("mynotes");
    var index=0;
    function addSticky()
    {

        var el=document.createElement("li");
        el.setAttribute("class","mylist");

        var cbtn=document.createElement("button");
        cbtn.setAttribute("class","close");
        cbtn.innerHTML="X";
        cbtn.setAttribute("onclick", "removeSticky()");

        var text=document.createElement("div");
        text.setAttribute("class","content");
        text.setAttribute("id","contentid_"+index);
        text.innerHTML="Sample content";

        el.appendChild(pin);
        el.appendChild(cbtn);
        el.appendChild(text);
        ul.appendChild(el);
        index++;

        var edit_data = document.getElementsByClassName('content');
        for (var i=0; i < edit_data.length; i++) {
            edit_data[i].addEventListener('click', edit);
        };

    }
    function removeSticky() {
        var clear = this.event.currentTarget.parentNode;
        ul.removeChild(clear);
    }



    function edit(){    
        var id = this.getAttribute('id');
        //alert(id);
        document.getElementById(id).contentEditable="true"; 
        //localStorage.clear();

    }

raychz · Answer 1 · 2019-09-29T05:35:35.847

0

Adding data to localStorage requires use of the setItem() method. The key and value can be any string:

localStorage.setItem('key', 'value')

// Or to set an array of items
const itemsArray = ["foo", "bar", 1, 2, 3];
localStorage.setItem('items', JSON.stringify(itemsArray))

To retrieve the value for a particular key, you'll need to use the getItem() method:

localStorage.getItem('key')

Use removeItem() to remove a particular key:

localStorage.removeItem('key')

Or clear all local storage with clear():

localStorage.clear()

See https://www.taniarascia.com/how-to-use-local-storage-with-javascript/ for a good tutorial of this.

edited Sep 29 '19 at 05:35

answered Sep 29 '19 at 05:29

raychz

1,085
1
8
24

I have Problem with edit data also store in local storage to get the same value – Test User Sep 29 '19 at 05:55
Can you explain the problem in more detail? I'm not sure that I fully understand. If you're trying to edit data that you already have stored in local storage, you can use `setItem(...)` to overwrite it. – raychz Sep 29 '19 at 05:57
I am not understand correctly. Please give code to which place i Placed. If i have set local storage it not correctly get the created data – Test User Sep 29 '19 at 06:10
If you want to set an object in local storage, you'll need to first convert it into a string: `localStorage.setItem('myItem', JSON.stringify({"id": 0, "data":"sample data"}))`. To retrieve this object again, you can call `const myObject = JSON.parse(localStorage.get('myItem'))` – raychz Sep 29 '19 at 06:12
It works fine for getting sample data.. but i want to store given inserted data and also refresh the page it don't hide content. – Test User Sep 29 '19 at 06:22
after refresh the page given local storage data display in form of list what we created.. – Test User Sep 29 '19 at 06:23
I do not understand what you are asking for. – raychz Sep 29 '19 at 06:29
On loading the Page given stored values displayed in the form of list how i created values on append.. how is it possible – Test User Sep 29 '19 at 06:42

score 0 · Answer 2 · answered Sep 29 '19 at 05:29

0

To Add/Edit Use localStorage.setItem("key", "value1");

To get value Use localStorage.getItem("key");

answered Sep 29 '19 at 05:29

Nithin Thampi

3,579
1
13
13

score 0 · Answer 3 · answered Sep 29 '19 at 05:29

0

To get the item from localStorage :

userName = localStorage.getItem('user')

To set the item in localStorage :

userName = "newUser"
localStorage.setItem('user',userName)

answered Sep 29 '19 at 05:29

vS12

310
2
8

I am trouble on which place to get and set Local storage Values in this program and also I store my data in format of {"id": 0, "data":"sample data"}. – Test User Sep 29 '19 at 05:53
$(function () { } - on page load – vS12 Sep 29 '19 at 06:07
I am using only javascript function to get and set localstorage values.. – Test User Sep 29 '19 at 06:11
if the id and data is for specific user then the way you are storing is just fine, for storing lot of records you can also use an array. For one of my pet projects I had to store lot of html tags itself for rendering them back on page-refresh, I used array for such purposes – vS12 Sep 29 '19 at 06:12
Refer the following links. https://www.w3schools.com/jsref/met_storage_setitem.asp To set item in using javascript functions, and https://stackoverflow.com/questions/807878/how-to-make-javascript-execute-after-page-load - for page load – vS12 Sep 29 '19 at 06:15

How to store the add and edit values store in local storage in javascript?

3 Answers3