Save data to local storage

I'm trying to set a bush of variables in local storage but the function doesn't run, I've tried to get the value but without luck, How can I save fields in Local storage?

function setPerson(){
var person = { 'name': getElementById('name'), 'photo': getElementById('photo')};

// Put the object into the storage
    alert(person);
    localStorage.setItem('person', JSON.stringify(person));
};

HTML In the HTML I'm from fields put values into tags and they are populated, but when I try to fetch them and save them nothing is happening...

I also tried to out fixed values in there and then the alert is displayed, but then it only says object and not the value

var testObject = { 'one': 1, 'two': 2, 'three': 3 };

// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');
alert('retrievedObject: ', JSON.parse(retrievedObject));;

Solution 1:

You can use localStorage like this:

// Retrieve your data from locaStorage
var saveData = JSON.parse(localStorage.saveData || null) || {};

// Store your data.
function saveStuff(obj) {
  saveData.obj = obj;
  // saveData.foo = foo;
  saveData.time = new Date().getTime();
  localStorage.saveData = JSON.stringify(saveData);
}

// Do something with your data.
function loadStuff() {
  return saveData.obj || "default";
}

jsFiddle

Solution 2:

First, you should use console instead of alert.

And, if you want to use the retrieved object somewhere, you'd better store it in a variable:

var testObject = { 'one': 1, 'two': 2, 'three': 3 };
localStorage.setItem('testObject', JSON.stringify(testObject));
var retrievedObject = JSON.parse(localStorage.getItem('testObject'));
console.log('retrievedObject: ', retrievedObject);

Solution 3:

W3C Schools gives you detailed examples on how to work with html and local storage.

w3cSchools - Local Storage