Shulou(Shulou.com)06/01 Report--

This article will explain in detail what the local storage function of html5 means. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

In html5, local storage is a way for web pages to store key-value pairs on the client side of the user's browser. Through local storage, web applications can store data locally in the user's browser.

The operating environment of this tutorial: windows7 system, HTML5 version, Dell G3 computer.

Local storage (LocalStorage) is a method that allows web pages to store key-value pairs on the client side of the user's browser; through local storage, web applications can store data locally in the user's browser.

Html local storage: better than cookies

Prior to HTML5, application data could only be stored in cookie, including each server request. Local storage is more secure, and large amounts of data can be stored locally without affecting the performance of the site.

Unlike cookie, the storage limit is much greater (at least 5MB) and the information is not transferred to the server.

Local storage passes through the place of origin (origin) (via domain and protocol). All pages, from the place of origin, can store and access the same data.

About the local storage object of html5:

Window.localStorage stores permanent data

Window.sessionStorage stores data for a session (when the browser is closed, the stored data will be cleared)

Simulate Taobao search and store local data?

Title * {margin: 0; padding: 0;} # all {width: 600px; margin: 100px auto 0px; position: relative;} # all input {float: left; width: 500px; height: 30px; outline: none Text-indent: 5px; border-radius: 15px 0px 0px 15px; border: 1px solid # ccc;} # all button {float: left; width: 80px; height: 32px; border: none; color: # fff; outline: none; border-radius: 0px 16px 16px 0px Background-color: orange;} # show {width: 490px; position: absolute; left: 10px; top: 30px; border: 1px solid # ccc; border-top: none; display: none;} # show p {padding-left: 10px Line-height: 20px; color: orange; font-size: 13px; padding-right: 10px;} # show pa {text-decoration: none; float: right;} Taobao search var text = $("# text"); var enter = $("# enter") Var show = $("# show"); var data = localStorage.getItem ("historyData") | | "[]"; var dataArr = JSON.parse (data); var init = function () {if (dataArr.length = = 0) {show.hide (); return;} show.html ("); $(dataArr) .each (function (index, item) {$(")

") .text (item) .prependTo (show) .append ($(") .text (" delete ") .attr (" index ", index);});} text.focus (function () {init (); if (dataArrystally0) show.show ();}); enter.click (function () {var val = text.val (). Trim (); if (val.length = 0) return DataArr.push (val); localStorage.setItem ("historyData", JSON.stringify (dataArr)); text.val (""); init ();}); $("# show"). On ("click", "a", function () {var index = $(this) .attr ("index"); dataArr.splice (index, 1) LocalStorage.setItem ("historyData", JSON.stringify (dataArr)); init ();}

Final effect picture:

This is the end of the article on "what is the meaning of html5's local storage function". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.