What is Web Storage

Web Storage provides a Web Storage mechanism. Browsers can securely store key-value pairs, which is more intuitive than cookies. It can store large amounts of data without affecting the performance of the site.

Stored as key-value pairs, similar to objects. We can access these values in a number of ways:

localStorage.colorSetting = "#a4509b";
localStorage["colorSetting"] = "#a4509b";
localStorage.getItem("colorSetting"); // '#a4509b'
localStorage.setItem("colorSetting"."#a4509b");
Copy the code

Web Storage has two mechanisms:

  • SessionStorage, used to temporarily hold data for the same window (or TAB). This storage area is only available for the duration of the page session (i.e. as long as the browser is open, including page reload and resume).
  • LocalStorage, used to store data throughout the site for a long time, without expiration time, until manual removal (after the browser closed, then open again data will still exist).

Storage supported or not

if (window.Storage) {
  / / yes! Support localStorage sessionStorage objects!
  // Some code.....
}
Copy the code

API

Both localStorage and sessionStorage use the same API. Common apis are as follows (take localStorage as an example) :

  • Save data:localStorage.setItem(key,value);
  • Read data:localStorage.getItem(key);
  • Delete a single data:localStorage.removeItem(key);
  • Delete all data:localStorage.clear();
  • Get the key of an index:localStorage.key(index);

A sample

A page that can customize colors, fonts, and decorative images. When different options are selected, the page is updated immediately and the data is stored in localStorage:

Fill the localStorage

If localStorage has not been populated, initialize the data; If the data is populated, update the page based on the data:

if (!localStorage.bgcolor) {
  populateStorage();
} else {
  setStyles();
}
Copy the code

Update the localStorage

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

  setStyles();
}
Copy the code

Listen to page data changes and trigger populateStorage:

bgcolorForm.onchange = populateStorage;
fontForm.onchange = populateStorage;
imageForm.onchange = populateStorage;
Copy the code

Update the page

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);
}
Copy the code

StorageEvent responds to storage changes

The StorageEvent event is emitted whenever a Storage object changes (that is, when a data item is created/updated/deleted, the event is not emitted by setting the same key repeatedly, but at most once by the storage.clear () method).

Note that only one of the following three conditions will trigger:

  • Changes made within the same page do not take effect
  • Changes to other pages under the same domain name (such as a new TAB or iframe) will take effect
  • A page under another domain name cannot access the same Storage object.
window.addEventListener("storage".function (e) {});
Copy the code

The returned event object contains a lot of useful information, such as the key of the changed data item, the old value before the change, the new value after the change, the URL of the document in which the changed storage object resides, and the storage object itself.

HTML 5 series

  • To understand it
  • Enhanced forms
  • Audio and Video
  • Canvas nanny tutorial (part 1) : Drawing
  • Canvas Nanny tutorial (part 2) : Animation
  • Finally drawing in SVG
  • Geolocation
  • A drag-and-drop operation
  • Understand the Web Worker
  • Understand the Web Storage
  • Understand the WebSocket