local storage

=======================
! this can't work!
function setPerson(){
var person = { 'name': getElementById('name'), 'photo': getElementById('photo')};

alert(person);

=======================
DONT use alert for debugging purposes, use console!
You have a complex object, so alert will always say [ObjectObject]

if you want to use alert you should use '+' instead of ',':
alert('retrievedObject: '+ JSON.parse(retrievedObject));

=======================
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";
}

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);

=======================
getElementById should be changed to
document.getElementById

Also this will get you the entire DOM element.

I assume you want what's inside the tag so i would say use
document.getElementById('name').innerHTML

instead. Just referencing the DOM element will give you a circular strucure error when you attempt to stringify it.

=======================


Sample code that i have confirmed works:
<html><head></head>
<body>
<p id="name">Hello</p>
<p id="photo">photo</p>

<script>
function setPerson(){
  var person = { 'name': document.getElementById('name').innerHTML, 'photo': document.getElementById('photo').innerHTML};

// Put the object into storage<br>
  localStorage.setItem('person', JSON.stringify(person));
}
setPerson()
</script>
</body></html>

=======================
The problem is that getElementById returns an HTML element, which is an object.

Then, JSON.stringify will attempt to iterate its own properties.

But probably, they haven't any (unless you added them manually).

Since you say they are fields, you can try saving its value instead:

var person = {
name: document.getElementById('name').value,
photo: document.getElementById('photo').value
};

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

w3cSchools - Local Storage

HTML Web Storage Objects

HTML web storage provides two objects for storing data on the client:

window.localStorage - stores data with no expiration date
window.sessionStorage - stores data for one session (data is lost when the browser tab is closed)

To test support for Web Storage Objects:

if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}

The localStorage Object

Example

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Try it Yourself »

Example explained:

Create a localStorage name/value pair with name="lastname" and value="Smith"
Retrieve the value of "lastname" and insert it into the element with id="result"

The example above could also be written like this:

// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;

The syntax for removing the "lastname" localStorage item is as follows:

localStorage.removeItem("lastname");

Note: Name/value pairs are always stored as strings. Remember to convert them to another format when needed!

The following example counts the number of times a user has clicked a button. In this code the value string is converted to a number to be able to increase the counter:

Example

if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
localStorage.clickcount + " time(s).";

Try it Yourself »

The sessionStorage Object

The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the specific browser tab.

The following example counts the number of times a user has clicked a button, in the current session:

Example

if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";

Try it Yourself »