title: JavaScript unique identifier for local storage
body: <p>Independent from the HTML id attribute, is there a good way to define a unique element identifier in JavaScript to use with HTML5 local storage?</p>
  
  <pre><code>localStorage.setItem('uniqueid', value);
  </code></pre>
  
  <p>Could do this:</p>
  
  <pre><code>var uid = ancestor.index(element); // uid = 0
  
  localStorage.setItem(namespace + uid, value);
  </code></pre>
  
  <p>The problem is that if the element order changes, the data is not associated with the right element:</p>
  
  <pre><code>var uid = ancestor.index(element); // another element is prepended, so uid = 1
  
  localStorage.getItem(namespace + uid);
  </code></pre>
  
  <hr>
  
  <p><strong>EDIT</strong>  - real example</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li aria-hidden="true"&gt;foo&lt;/li&gt;
  &lt;li&gt;bar&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>jQuery code:</p>
  
  <pre><code>var ul = $('ul');
  
  ul.find('li').each(function() {
  
      var element = $(this),
          uid = ul.index(element),
          data = JSON.parse(this.storage.getItem(uid));
  
      // load
      console.log(data.hidden);
  
      // save
      this.$window.bind('unload', function() {
  
          localStorage.setItem(uid, JSON.stringify({
              hidden: typeof element.attr('aria-hidden') === 'string',
          }));
      });
  });
  </code></pre>
  
  <p>Now I am using the index of each list item to create a unique identifier. I could set a data-uid with HTML like so:</p>
  
  <pre><code>&lt;li data-uid="foo"&gt;foo&lt;/li&gt;
  </code></pre>
  
  <p>Is there a way to set the unique identifier dynamically?</p>