[RESOLVED] Storing array/object into localStorage?
localStorage will only store values in string format. Is there any way to modify it to store arrays/objects? http://hacks.mozilla.org/2009/06/localstorage/ says it's possible to use native JSON support to create an object store on top of localStorage, but I can't work out how to apply the given example code:
javascript Code:
Storage.prototype.setObject = function(key, value) {
this.setItem(key, JSON.stringify(value));
}
Storage.prototype.getObject = function(key) {
return JSON.parse(this.getItem(key));
}
Can anyone help me decipher this and show me how to use it to store objects in localStorage?
Re: Storing array/object into localStorage?
Finally deciphered it. It took me a few minutes to work out that it's creating new methods (setObject, getObject), not modifying existing methods. :afrog:
EDIT: appears to only work in Firefox. Does anyone know of a solution that would work in Safari?
Re: Storing array/object into localStorage?
I tried an implementation of the script in Chrome and it worked (and Safari uses the same WebKit engine?...). Can you show code for what you're trying that doesn't work?...
Re: Storing array/object into localStorage?
html Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Local Storage</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script type="text/javascript">
if (typeof(sessionStorage) == 'undefined' || typeof(localStorage) == 'undefined') {
alert('local and session storage not supported by this browser.');
} else {
Storage.prototype.setObject = function(key, value) {
this.setItem(key, JSON.stringify(value));
}
Storage.prototype.getObject = function(key) {
return JSON.parse(this.getItem(key));
}
}
function rnd(low,high) {
if (!low)
low = 0;
if (!high)
high = 100;
return Math.floor(Math.random()*(high-low+1))+low;
}
function goLocalStorage() {
alert('typeof(localStorage.setObject): ' + typeof(localStorage.setObject));
alert('typeof(localStorage.getObject): ' + typeof(localStorage.getObject));
if (!localStorage.getObject('pageArray')) {
var myArray = new Array(rnd(),rnd(),rnd());
try {
localStorage.setObject('pageArray',myArray);
} catch (e) {
if (e == QUOTA_EXCEEDED_ERR)
alert('localStorage Quota exceeded.');
else
alert('unknown error');
}
} else {
alert('pageArray: ' + localStorage.getObject('pageArray'));
}
var tArray = localStorage.getObject('pageArray');
alert('typeof(tArray): ' + typeof(tArray));
alert('tArray: ' + tArray);
alert('tArray[0]: ' + tArray[0]);
alert('tArray[1]: ' + tArray[1]);
alert('tArray[2]: ' + tArray[2]);
localStorage.removeItem('pageArray');
}
</script>
</head>
<body>
<h1>Local Storage</h1>
<button onclick="goLocalStorage()">Local Storage</button>
</body>
</html>
In chrome (4.0.249.78), it fails the test for checking sessionStorage and localStorage. In Safari (4.0.4), it gets as far as the first two alert() calls (returning type "function" for both) in goLocalStorage() and then appears to stop. There are no problems in Firefox.
Re: Storing array/object into localStorage?
I get entirely opposite results. Firefox 3.6 doesn't work (only gets the first 2 alerts), while I installed the latest Safari - "4.0.4 (531.21.10)" - and your code works perfectly for me. Though Chrome I get the same: the FAIL alert (yet if I take out only the check for sessionStorage, the rest appears to work fine).
So... not sure what to say. In the sample code I wrote myself, I put a JSON object (rather than an array) into setObject(), because it looked like that's what it was expecting. I'll see if that makes a difference in your script... Edit: nope, no difference. :/
Re: Storing array/object into localStorage?
It appears that Firefox will only run it properly if the page is accessed from a valid URL and not "file://". It ran fine from localhost (IIS) but not when I accessed it locally via file://. I got opposite results with Safari, where it worked via local access but not from IIS/localhost. I don't know why Google implemented LocalStorage without implementing SessionStorage :confused:
Re: Storing array/object into localStorage?
Ugh. While I was surprised to see how widely localStorage was adopted by modern browsers, maybe the differences in their implementations makes this too early for practical usage.
Re: Storing array/object into localStorage?
Quote:
Originally Posted by
SambaNeko
Ugh. While I was surprised to see how widely localStorage was adopted by modern browsers, maybe the differences in their implementations makes this too early for practical usage.
:( Looks like I'll have to wait a while for things to stabilise before attempting to use this again.
Re: [RESOLVED] Storing array/object into localStorage?
Actually, because you said Safari didn't work for you on localhost, I didn't try that myself (just opened it from file://). But I uploaded it to my domain out of curiosity and it does work in Safari for me. You can try it out here if you'd like. localStorage is supposedly by domain, so maybe localhost is problematic? '_' Edit: nope, tried it localhost and it worked for Safari with that too.
Sorry for the all the guess work - I don't have any deep knowledge on this particular subject (I'd love to hear from someone who does), but a good deal of interest.
Summary:
Safari 4.0.4: works file://, localhost, remote domain.
Firefox 3.6: fails file://, works localhost, remote domain.
Chrome 4.0.249.78: if the typeof(sessionStorage) check is removed, works file://, localhost and remote domain.
Re: [RESOLVED] Storing array/object into localStorage?
Quote:
Originally Posted by
SambaNeko
Actually, because you said Safari didn't work for you on localhost, I didn't try that myself (just opened it from file://). But I uploaded it to my domain out of curiosity and it does work in Safari for me.
Thanks for the pointer. I tested it on a domain too and it does work. The one remaining problem is that safari on iPhone (my dev platform for this localStorage stuff) doesn't yet have JSON support. Do you know of any good JSON js library that I could use as a replacement until it gets support?
EDIT: found one at http://www.json.org/json2.js
Re: [RESOLVED] Storing array/object into localStorage?
:( iPhone is giving errors with json2.js (TypeError: Result of expression 'text' [null] is not an object.). Normal localStorage usage is fine on iPhone, but it's useless until mobile safari gets JSON support.
