Usage and example of local storage localStroage

Usage and example of local storage localStroage

LocalStorage is a new way for HTML5 to store data on the client. There is no time limit for storing data.

Main APIs of localStorage:

LocalStorage. setItem (key, value); key is the variable for storing data, and value is the data saved

LocalStorage. getItem (key); read the data stored previously

 

In a small example, two buttons and a paragraph of text are displayed. Click the zoom-in button to enlarge the text and click the zoom-out button to reduce the text size. Use the client storage to refresh the page again and retain the text size for the last time. This improves the user experience based on user habits.

Html structure:

<Button id = "changeLarge"> zoom in </button> <button id = "changeSmall"> zoom out </button> <p class = "article"> window. onload = function () {var changeLarge = document. getElementById ('changelarge'); var changeSmall = document. getElementById ('changesmall'); var article = document. getElementsByClassName ('Article') [0]; var fontSize; if (localStorage. getItem ("fontsize ")! = "Undefined") {// if the data is read, fontSize = parseInt (localStorage. getItem ("fontsize"); // put the data in the fontSize variable} else {fontSize = 12;} article. style. fontSize = fontSize + 'px '; // set the text size of the current article/* click the zoom in button to enlarge the text */changeLarge. onclick = function () {fontSize + = 1; localStorage. setItem ("fontsize", fontSize); // store fontSizearticle. style. fontSize = fontSize + 'px ';}/* click the zoom in button to narrow down the text */changeSmall. onclick = function () {fontSize-= 1; localStorage. setItem ("fontsize", fontSize); article. style. fontSize = fontSize + 'px ';}}