CODEWITHSUNDEEP
javascriptjquerystringhtmllocal-storage
Crusty Smith
Crusty Smith

Reputation: 65

localStorage.setItem can't store strings of html

I used to have a script that used GM_setValue() to store a chunk of html from a page, and load it on another page. So:

var data = '<div id="test">testing</div>';
GM_setValue("test", data);
alert(GM_getValue("test", "failed"));

would alert <div id="test">testing</div>.

Recently we moved away from the GM API in favor of jQuery and HTML5, and replaced GM_setValue GM_getValue with functions like:

function $setVal(name, value){
 localStorage.setItem(name, value);
 return false;
}
function $getVal(name, notset){
 return localStorage.getItem(name) || notset;
}

The problem is now that it can no longer store strings of HTML like the GM equivs can. With the new functions in place, the example script would alert failed.

i've tried escaping with regex's, and escaping with escape(), but I'm having no luck.

Anyone know what to do?

EDIT: the awkward thing is, this actually seems to work fine. just not in the scope I need it to. I have a text box that is simply evaled as javascript on submission for testing, and when I call the function from there, it works, however chucks an error when called by the code. Thanks you for your help, but it doesn't actually seem to be a problem the same way I thought it was, sorry.

Upvotes: 1

Views: 3557

Answers (3)

Paul S.
Paul S.

Reputation: 66394

I would implement the Storage of generic data by converting it to JSON and back. This works for everything that supports conversion to JSON (String, Number, most Objects, Boolean, etc).

var Mem = (function (localStorage, JSON) {
    return {
        'set': function (key, value) {
            return localStorage.setItem(key, JSON.stringify(value));
        },
        'get': function (key) {
            return JSON.parse(localStorage.getItem(key));
        },
        'del': function () {
            for (var i = 0; i < arguments.length; ++i)
                localStorage.removeItem(arguments[i]);
        }
    };
}(window.localStorage, window.JSON)); // protect references

And usage

Mem.set('foo', 0);
Mem.set('bar', '0');
Mem.set('baz', false);
Mem.get('foo'); // Number 0
Mem.get('bar'); // String "0"
Mem.get('baz'); // Bool false
Mem.del('foo', 'bar', 'baz'); // cleanup

So for your example

var data = '<div id="test">testing</div>';
Mem.set('test', data);
console.log(Mem.get('test') === data); // true
Mem.del('test'); // cleanup

Upvotes: 0

VoronoiPotato
VoronoiPotato

Reputation: 3183

Use encodeURI to store, then decodeURI to retrieve

localStorage.setItem('html',encodeURI('<div id="test">testing</div>'))
localStorage.getItem('html')
"%3Cdiv%20id=%22test%22%3Etesting%3C/div%3E"
decodeURI(localStorage.getItem('html'))
  "<div id="test">testing</div>"

Upvotes: 1

Jason Evans
Jason Evans

Reputation: 29186

Try escaping the HTML like so

var html = '<div id=\"test\">testing</div>';

localStorage.setItem("Foo", html);

Put \ before the ".

EDIT:

I just tried the following (in Firefox as it was open in front of me), and it works fine:

var html = '<div id="test">testing</div>';

localStorage.setItem("Foo", html);

console.log(localStorage.getItem("Foo"));

Just tried it in Chrome and it works fine.

Upvotes: 1

Related Questions