PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Tuesday, August 16, 2022

[FIXED] How to save the list data in local storage

 August 16, 2022     html, javascript, output     No comments   

Issue

I am doing a to-do list web page using HTML/JavaScript, I did only display the content entered by users with priority bases. I need to save that content in local storage using JavaScript(Entered content must be present after refreshing the page also).

Below you can see my code. I believe I should use an array for that but I dont know how to use local storage 'get item', 'set item', 'JSON.stringfy' and 'JSON.parse'. Please, can you help me?

function Changecolor() {
  var lists = document.getElementsByClassName('task-list')[0];
  btn_colors = {
    'hi': 'hiP',
    'med': 'medP',
    'low': 'lowP'
  }
  radios = document.getElementsByName('rgPrior');

  for (var i = 0, length = radios.length; i < length; i++) {
    if (radios[i].checked) {
      btn_selected_color = (btn_colors[radios[i].value]);
      break;
    }
  }
  var todo = document.getElementById('item').value;
  var entry = document.createElement('li');
  entry.className = btn_selected_color;
  entry.appendChild(document.createTextNode(todo));
  lists.appendChild(entry);
}
.hiP {
  background-color: red;
}

.medP {
  background-color: blue;
}

.lowP {
  background-color: green;
}

.ch5 {
  padding-left: 30px;
}
<form>
  <label for="txtAdd">New thing to do:</label>
  <input name="txtAdd" type="text" id="item" />
  <input type="button" name="btnAdd" id="btnAdd" value="Add List" onClick="Changecolor()" />
</form>
<p>Set Priority</p>
<p>
  <label><input type="radio" name="rgPrior" value="hi" id="rgPrior_0"/>High</label>
  <br>
  <label><input type="radio" name="rgPrior" value="med" id="rgPrior_1"/>Medium</label>
  <br/>
  <label><input type="radio" name="rgPrior" value="low" id="rgPrior_2"/>Low</label>
  <br/>
</p>
<ul class="task-list" id="store"> </ul>

<button>Delete</button>


Solution

JSON.stringify() converts a JavaScript array/object to a string which can be saved in localStorage, and JSON.parse() converts the string saved in localStorage to a JavaScript array/object.

CodePen link (doesn't work on StackOverflow)
https://codepen.io/LuisAFK/pen/ZEKLLEZ



Answered By - LuisAFK
Answer Checked By - Terry (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing