So I am trying save the value of the text inputs to local storage after a user enters it using a button. Once they save it, they click another button to show the contents of local storage in another text area. I've tried every method I could think of. Thanks in advance.
<script>
function add_local(){
window.localStorage['display'] = document.getElementById('firstname').value;
window.localStorage['display']= document.getElementById('age').value;
window.localStorage['display']= document.getElementById('course').value;
}
function show_local(){
document.getElementById('firstname').value = window.localStorage['display'];
document.getElementById('age').value = window.localStorage['display'];
document.getElementById('course').value = window.localStorage['display'];
}
</script><input type="text" id="firstname" /><br /><br /> <label for="age">Age</label><br />
<input type="text" id="age" /><br /><br /> <label for="course">Favorite Course</label><br /> <input type="text" id="course" /><br />
</div>
<div class="right">
<input type="button" value="Add to localStorage" onclick="add_local()" />
<input type="button" value="Add to sessionStorage" />
<input type="button" value="Show localStorage" onclick="show_local()"/>
<input type="button" value="Show sessionStorage" />
</div>
</div>
<div class="display">
<label for="display">Display</label><br>
<textarea id="display" name="display" rows="10" ></textarea>
</div>
</div>
</body>in local storage you have method to set and get
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
like
localStorage.setItem('myCat', 'Tom');
const cat = localStorage.getItem('myCat');
with those method you save to localStorage
You did almost everything right. Just replace the following JS code with your js. You just made replacing your old storage data while assigning with a new one.
function add_local() {
window.localStorage['firstname'] = document.getElementById('firstname').value;
window.localStorage['age'] = document.getElementById('age').value;
window.localStorage['course'] = document.getElementById('course').value;
}
function show_local() {
document.getElementById('firstname').value = window.localStorage['firstname'];
document.getElementById('age').value = window.localStorage['age'];
document.getElementById('course').value = window.localStorage['course'];
}
Try this :
function add_local() {
const display = {};
display.firstname = document.getElementById('firstname').value;
display.age = document.getElementById('age').value;
display.course = document.getElementById('course').value;
window.localStorage.setItem('display', JSON.stringify(display));
}
and for show try this :
function show_local() {
let _display = JSON.parse(localStorage.getItem("display"));
document.getElementById('firstname').value = _display.firstname;
document.getElementById('age').value = _display.age;
document.getElementById('course').value = _display.course;
document.getElementById('display').value = Object.values(_display);
}