Can an HTML5 localStorage key be any string?

Question

I'm working on an application that will use HTML5 localStorage. I can't find anywhere whether there are any restrictions on the key besides the fact that it must be a string.

Specifically I'd like to know if I can use a URL as a key in localStorage across all browsers that support localStorage (eg, are symbols like :/?#._-=+@!$%^&*()[]{}|<> allowed to be used in the key?).

Also: what about whitespace? Is that allowed in a localStorage key across browsers?

I found this topic but it only appears to have tested acceptable strings in localStorage values (not keys).

Couldn't you test and see if it worked? As for if it's "legal", I'm not sure there. — Sterling Archer, Nov 11 '13 at 01:14
The test unfortunately crashed my browser. Working on modifying it so it won't. — Brad Dwyer, Nov 11 '13 at 01:18

score 20 · Accepted Answer · answered Nov 11 '13 at 02:22

The specification requires keys and values to be set and returned as a DOMString type value. DOMString is described in [DOM Level 3 Core][1] as:

A DOMString is a sequence of 16-bit units.

IDL Definition

    valuetype DOMString sequence<unsigned short>;

The UTF-16 encoding was chosen because of its widespread industry practice. Note that for both HTML and XML, the document character set (and therefore the notation of numeric character references) is based on UCS [ISO/IEC 10646]. A single numeric character reference in a source document may therefore in some cases correspond to two 16-bit units in a DOMString (a high surrogate and a low surrogate). For issues related to string comparisons, refer to String Comparisons in the DOM.

For Java and ECMAScript, DOMString is bound to the String type because both languages also use UTF-16 as their encoding.

So officially, any legal UTF-16 string is legal as a key or a value. Not every UTF-16 codepoint is a legal character though so you should try to avoid certain symbols like "surrogate pairs", "byte-order marks" and "reserved characters".

score 3 · Answer 2 · answered Nov 11 '13 at 01:21

I was able to adapt the test from the linked StackOverflow topic to test the keys as well:

function run_test(lowerlimit, UPPERLIMIT) {
    try {
        if (!window.localStorage) {
            // I recall that in one of the older Chrome version (4),
            // localStorage === null
            return 'Localstorage is not supported';
        }
        if (isNaN(lowerlimit) || isNaN(UPPERLIMIT) || lowerlimit > UPPERLIMIT) {
            return 'One of the limits is not a valid number!';
        }
        var i = lowerlimit - 1;
        var character_range = [];
        while (++i < UPPERLIMIT) character_range.push(i);
        input = String.fromCharCode.apply(String, character_range);
        localStorage.setItem(input, input);
        output = localStorage.getItem(input);
        if (input === output) {
            return true;
        }
        // Uh oh, not equal!
        var result = [];
        for (i=0; i<UPPERLIMIT-lowerlimit; i++) {
            if (input[i] !== output[i]) {
                result.push(i + lowerlimit);
            }
        }
        return result;
    }catch(e){return 'Error:' + e;}
}
run_test(0x20, 0xD7FF);

The result appears to be the same, at least in Chrome. Still need to test in other browsers.

score 2 · Answer 3 · answered Nov 11 '13 at 01:32

A simple test for browser support and key validity could be:

var testKey = "test";
var value = "some value";

if(typeof(Storage)!=="undefined") {
  console.log("localStorage and sessionStorage support!");
  console.log("About to save. Local storage is:");
  console.log(localStorage);
  localStorage[testKey] = value;
  console.log("Key saved: "+ testKey);
  console.log(localStorage);
  localStorage.removeItem(testKey);  //<--- key deleted here
  console.log("key deleted: " + testKey);
  console.log(localStorage);
  console.log("DONE ===");
} else {
  console.log("Sorry! No web storage support..");
}

I´ve tested in Chrome running from console.

Adapted from http://www.w3schools.com/html/html5_webstorage.asp.

score 1 · Answer 4 · answered Nov 11 '13 at 01:42

1

yes, you can encode that string.

but Html storage has size limit.

answered Nov 11 '13 at 01:42

Teddy

787
5
13

Can an HTML5 localStorage key be any string?

4 Answers4