Web Storage API

Storage -, - , . ( , , ). , getItem() setItem() . colorSetting:

localStorage.colorSetting = '#a4509b';
localStorage['colorSetting'] = '#a4509b';
localStorage.setItem('colorSetting', '#a4509b');

:

• (sessionStorage) , . ( , )
• (localStorage) , , .

Window.sessionStorage Window.localStorage ( , , Window WindowLocalStorage WindowSessionStorage, localStorage sessionStorage) Storage, , . Storage sessionStorage localStorage

, , localStorage Storage ; sessionStorage Storage . , .

localStorage

localStorage, , localStorage .

localStorage localStorage window. , , , . localStorage , , .. . localStorage, . Safari, Private Browsing mode localStorage , . .

, localStorage:

function storageAvailable(type) {
  try {
    var storage = window[type],
      x = "__storage_test__";
    storage.setItem(x, x);
    storage.removeItem(x);
    return true;
  } catch (e) {
    return false;
  }
}

:

if (storageAvailable("localStorage")) {
  // Yippee! We can use localStorage awesomeness
} else {
  // Too bad, no localStorage for us
}

sessionStorage storageAvailable('sessionStorage') - localStorage

Web storage, , Web Storage Demo. , , :

[] , ; , localStorage, , .

- , landing page, .

[]

main.js, Storage (. )

if (!localStorage.getItem("bgcolor")) {
  populateStorage();
} else {
  setStyles();
}

Storage.getItem() storage; , bgcolor; , populateStorage(), storage. , setStyles(), . : Storage.length storage object.

Storage

, Storage.getItem(). , . :

function setStyles() {
  var currentColor = localStorage.getItem("bgcolor");
  var currentFont = localStorage.getItem("font");
  var currentImage = localStorage.getItem("image");

  document.getElementById("bgcolor").value = currentColor;
  document.getElementById("font").value = currentFont;
  document.getElementById("image").value = currentImage;

  htmlElem.style.backgroundColor = "#" + currentColor;
  pElem.style.fontFamily = currentFont;
  imgElem.setAttribute("src", currentImage);
}

. , . , , .

Storage.setItem() , . .

function populateStorage() {
  localStorage.setItem("bgcolor", document.getElementById("bgcolor").value);
  localStorage.setItem("font", document.getElementById("font").value);
  localStorage.setItem("image", document.getElementById("image").value);

  setStyles();
}

The populateStorage() function sets three items in local storage the background color, font, and image path. It then runs the setStyles() function to update the page styles, etc.

We've also included an onchange handler on each form element, so that the data and styling is updated whenever a form value is changed:

bgcolorForm.onchange = populateStorage;
fontForm.onchange = populateStorage;
imageForm.onchange = populateStorage;

StorageEvent

The StorageEvent is fired whenever a change is made to the Storage object. This won't work on the same page that is making the changes it is really a way for other pages on the domain using the storage to sync any changes that are made. Pages on other domains can't access the same storage objects.

On the events page (see events.js) the only JavaScript is as follows:

window.addEventListener("storage", function (e) {
  document.querySelector(".my-key").textContent = e.key;
  document.querySelector(".my-old").textContent = e.oldValue;
  document.querySelector(".my-new").textContent = e.newValue;
  document.querySelector(".my-url").textContent = e.url;
  document.querySelector(".my-storage").textContent = e.storageArea;
});

Here we add an event listener to the window object that fires when the Storage object associated with the current origin is changed. As you can see above, the event object associated with this event has a number of properties containing useful information the key of the data that changed, the old value before the change, the new value after that change, the URL of the document that changed the storage, and the storage object itself.

Web Storage . , , :

• Storage.removeItem() - , - .
• Storage.clear() , storage .

api.Window.localStorage

api.Window.sessionStorage

• Web Storage API landing page