localStorage.clear();

    localStorage.setItem('key', 'value');

    localStorage.setItem('key', 1);

    localStorage.setItem('test', 1);

    alert( localStorage.getItem('key'));

    localStorage.removeItem('key');

    alert( localStorage.key(0) );

    alert( localStorage.key(1) );

    alert( localStorage.length );

    // set key
  localStorage.test = 2;

    // get key
  alert( localStorage.test ); // 2

    // remove key
  delete localStorage.test;

    // get key
  alert( localStorage.test ); // undefined

! Not recommended - better use setItem() and getItem()

! Not iterable - we need loops

    // loop over them as over an array
  for(let i=0; i<localStorage.length; i++) {
    let key = localStorage.key(i);
    alert(`${key}: ${localStorage.getItem(key)}`);
  }

    // for key in localStorage - bad try
  for(let key in localStorage) {
    alert(key); // shows getItem, setItem and other built-in stuff
  }

  // for key in localStorage
  // filter fields from the prototype with hasOwnProperty check
  for(let key in localStorage) {
    if (!localStorage.hasOwnProperty(key)) {
      continue; // skip keys like "setItem", "getItem" etc
    }
    alert(`${key}: ${localStorage.getItem(key)}`);
  }

  // get the “own” keys with Object.keys and then loop over them
  let keys = Object.keys(localStorage);
  for(let key of keys) {
    alert(`${key}: ${localStorage.getItem(key)}`);
  }

! Not recommended - better use setItem() and getItem()

! BOTH key and value MUST be strings.

    // everything gets converted to string automatically
  localStorage.user = {name: "John"};
  alert(localStorage.user); // [object Object]

    // JSON to store objects
  localStorage.user = JSON.stringify({name: "John"});
  let user = JSON.parse( localStorage.user );
  alert( user.name ); // John

    // stringify the whole storage object
  alert( JSON.stringify(localStorage, null, 2) );

! The event triggers on all window objects where the storage is accessible, except the one that caused it.

    // triggers on updates made to the same storage from other documents
  // can also use window.addEventListener('storage', event => {
  window.onstorage = event => {
  if (event.key != 'now') return;
  alert(event.key + ':' + event.newValue + " at " + event.url);
  };
        
  localStorage.setItem('now', Date.now());

! event.url - the url of the document where the data was updated

! event.storageArea references the storage object that was modified

! storage event does not happen for object-like access