在本地存储中设置对象的值

Question

I would like to store User Data as a single object in Local Storage.

Here is the code and below it the problem description:

const firstName = document.getElementById('firstname');
const lastName = document.getElementById('lastname');
const address = document.getElementById('address');
const city = document.getElementById('city');
const postCode = document.getElementById('postcode');
const email = document.getElementById('email');
const checkBox = document.getElementById('check-remember');
const message = document.getElementById('message');

// define userData object 

let userData = {
    firstName: '',
    lastName: '',
    address: '',
    city: '',
    postCode: '',
    email: '',
    checkBox: '',
    message: ''
};

// set this object as string in the LS 

localStorage.setItem('userData', JSON.stringify(userData));

// parse it to native JS data and store it in new var

let userDataNative = JSON.parse(localStorage.getItem('userData'));

// add event listeners to form's input fields: 

firstName.addEventListener('keyup', setFirstName);
lastName.addEventListener('keyup', setLastName);
address.addEventListener('keyup', setAddress);
city.addEventListener('keyup', setCity);
postCode.addEventListener('keyup', setPostCode);
email.addEventListener('keyup', setEmail);
message.addEventListener('keyup', setUserMessage);

// set actual input values as userData object's value for each key

function setFirstName(event) {
    userData.firstName = event.target.value;
}
function setLastName(event) {
    userData.lastName = event.target.value;
}
function setAddress(event) {
    userData.address = event.target.value;
}
function setCity(event){
    userData.city = event.target.value;
}
function setPostCode(event){
    userData.postCode = event.target.value;    
}
function setEmail(event){
    userData.email = event.target.value;
}
function setUserMessage(event){
    userData.message = event.target.value;
}

The Problem: the userData object in Local Storage is not updated. When I enter some text in the input fields on the page and then log userData I do get an object with the right keys and the actual values in the console - BUT the userData object in Local Storage stays empty.

Can you help? What am I missing here?

Many thanks, all help much appreciated.

Answer 1

It appears you're assuming userData is a reference to localStorage , but it is not. Since localStorage is a string and you have to parse it to a javascript object, there is no such relationship. This means that, to re-save the information to localStorage , you need to execute the following code again.

localStorage.setItem('userData', JSON.stringify(userData));