[RESOLVED] Storing array/object into localStorage?

**tr333** · Jan 27th, 2010, 12:25 AM

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?

**tr333** · Jan 27th, 2010, 12:32 AM

Finally deciphered it. It took me a few minutes to work out that it's creating new methods (setObject, getObject), not modifying existing methods.

EDIT: appears to only work in Firefox. Does anyone know of a solution that would work in Safari?

**SambaNeko** · Jan 27th, 2010, 01:23 AM

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?...

**tr333** · Jan 31st, 2010, 08:18 PM

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.

**SambaNeko** · Jan 31st, 2010, 11:44 PM

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. :/

**tr333** · Feb 1st, 2010, 12:18 AM

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

**SambaNeko** · Feb 1st, 2010, 10:21 AM

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.

**tr333** · Feb 1st, 2010, 09:29 PM

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.

**SambaNeko** · Feb 2nd, 2010, 11:54 AM

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.

**tr333** · Feb 2nd, 2010, 05:51 PM

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

**tr333** · Feb 2nd, 2010, 06:57 PM

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.

Thread: [RESOLVED] Storing array/object into localStorage?

Thread Tools

Display

[RESOLVED] Storing array/object into localStorage?

Re: Storing array/object into localStorage?

Re: Storing array/object into localStorage?

Re: Storing array/object into localStorage?

Re: Storing array/object into localStorage?

Re: Storing array/object into localStorage?

Re: Storing array/object into localStorage?

Re: Storing array/object into localStorage?

Re: [RESOLVED] Storing array/object into localStorage?

Re: [RESOLVED] Storing array/object into localStorage?

Re: [RESOLVED] Storing array/object into localStorage?

Posting Permissions