I am trying to develop an offline HTML5 application that should work in most modern browsers (Chrome, Firefox, IE 9+, Safari, Opera). Since IndexedDB isn't supported by Safari (yet), and WebSQL is deprecated, I decided on using localStorage to store user-generated JavaScript objects and JSON.stringify()
/JSON.parse()
to put in or pull out the objects. However, I found out that JSON.stringify()
does not handle methods. Here is an example object with a simple method:
var myObject = {};
myObject.foo = 'bar';
myObject.someFunction = function () {/*code in this function*/}
If I stringify this object (and later put it into localStorage), all that will be retained is myObject.foo
, not myObject.someFunction()
.
//put object into localStorage
localStorage.setItem('myObject',JSON.stringify(myObject));
//pull it out of localStorage and set it to myObject
myObject = localStorage.getItem('myObject');
//undefined!
myObject.someFunction
I'm sure many of you probably already know of this limitation/feature/whatever you want to call it. The workaround that I've come up with is to create an object with the methods(myObject = new objectConstructor()
), pull out the object properties from localStorage, and assign them to the new object I created. I feel that this is a roundabout approach, but I'm new to the JavaScript world, so this is how I solved it. So here is my grand question: I'd like the whole object (properties + methods) to be included in localStorage. How do I do this? If you can perhaps show me a better algorithm, or maybe another JSON method I don't know about, I'd greatly appreciate it.
If you want to stringify your objects, but they have functions, you can use
JSON.stringify()
with the second parameterreplacer
. To prevent cyclic dependencies on objects you can use avar cache = []
.In our project we use lodash. We use the following function to generate logs. Can be used it to save objects to
localStorage
.Functions in javascript are more than just their code. They also have scope. Code can be stringified, but scope cannot.
JSON.stringify()
will encode values that JSON supports. Objects with values that can be objects, arrays, strings, numbers and booleans. Anything else will be ignored or throw errors. Functions are not a supported entity in JSON. JSON handles pure data only, functions are not data, but behavior with more complex semantics.That said you can change how
JSON.stringify()
works. The second argument is areplacer
function. So you could force the behavior you want by forcing the strinigification of functions:But when you read that back in you would have to eval the function string and set the result back to the object, because JSON does not support functions.
All in all encoding functions in JSON can get pretty hairy. Are you sure you want to do this? There is probably a better way...
Perhaps you could instead save raw data, and pass that to a constructor from your JS loaded on the page.
localStorage
would only hold the data, but your code loaded onto the page would provide the methods to operate on that data.We don't need to save the
getName()
method tolocalStorage
. We just need to feed that data into a constructor that will provide that method.