LocalStorage does not save successfully.Please help me.

How do I save localStorage

I'm making a todo list.

<divid="today" class="tab-plane active">
                    <p>What to do today</p>
                    <div class="task-wrapper">
                        <span style="white-space:nowrap;"class="add-task-wrapper">
                                <form id="form-a" class="add-task-wrappers">
                                    <input type="button"value="+"class="add-mark" id="plus-a">
                                    <input style="background-color:rgb(206,214,95)"placeholder="Please add something to do today" class="add-task" id="WantToAdda" value=">
                                </form>
                        </span>
                        <ulid="todolist-a" class="todolist">
                            <!--Add todolist-->
                        </ul>
                    </div>
                </div>

let plusa= document.getElementById("plus-a");
plusa.addEventListener('click', function(){
    let newTask = document.getElementById("WantToAdda").value;
    let lists = document.getElementById("todolist-a");
    if(newTask!=""){
    lists.insertAdjacentHTML("afterbegin", "<li><p> &>/p>"+newTask+"<ic class='far fa-trash-alt gomi'></i>/li>);

Add the characters in the input tag to the todolist.
<li>p> &</p>* string (task)*<ic class="far fa-trash-alt gomi"></i><li>
I will add it in the form of .

The mark of も of also changes by clicking.
I'd like to save the mark and task as a set, what should I do?
There is also a deletion function, so you can also delete it.I want the tasks and marks to remain the same when I reload the page.

Arrayed and saved to localstorage in JSON.stringify()
Repeat JSON.stringify() when removing from localstorage and re-arranging it with JSON.parse() to add, edit, delete, and save it with JavaScript.

I was told that, but I don't know.When and how do I save it?

javascript html

2022-09-30 21:43

2 Answers

You can do this

var data;

// Read the data.
data=JSON.parse(localStorage.save_data);

// We're going to branch out to see if it was there before we read the data.
var save_data = localStorage.save_data;
if(save_data){
    data=JSON.parse(localStorage.save_data);
    // You can use data to write an app.
    ...
} else{
    data=[];
}

// Save data to localStorage
localStorage.save_data = JSON.stringify(data);

Attempted to create a random demo: https://jsfiddle.net/jLcqbdfk/3/ (code snippet functionality is on a different site because CORS does not allow localStorage)

2022-09-30 21:43

Here are three ways from rough to decent.

Save the innerHTML of the todolist-a element to localStorage when the TODO list is updated (in the presented click handler, when you change を or delete data).
When loading the page, set any data in localStorage to innerHTML of the todolist-a element.

It can be achieved by adding a few lines to the code provided, but it is a completely crude method and makes it difficult to change the markup in the list.I don't usually take this step.

When the TODO list is updated, check the DOM structure in todolist-a to create an array similar to the following, JSON.stringify() and save it to localStorage

[
  {status:' '', task:'pay rent'},
  {status: ' '', task: 'Reply to 〇 さん's email',
]

When loading the page, restore the array data with JSON.parse() if there is data in localStorage and rebuild the markup in todolist-a from that array data

Do not build each time you save an array like the one above, but always keep it.
If there is a change in the TODO item, find the appropriate array element, update it only, and save it in JSON.stringify() and localStorage.Example: Delete the third item in the array when the third <li> trash can icon is pressed
Do the same thing when loading the page

I think C is the most matomo, but if the amount of data is small, I think B is enough.
There are many libraries in the world that make it easy to associate JavaScript data with HTML expressions.

2022-09-30 21:43

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656