HTML5 local storage application sessionStorage and localStorage
Aug 19, 2017 pm 02:13 PMBefore html5, browsers usually used cookies to store data, but cookies had domain name and size limits.
After html5 became popular, browser-side data storage could be achieved through localStorage and sessionStorage. , what are the characteristics of these two?
sessionStorage
SessionStorage belongs to a temporary session. The validity period of data storage is: the time period from the opening of the page to the closing of the page. It belongs to the temporary storage of the window. When the page is closed, the local storage disappears
localStorage
Permanent storage (data can be deleted manually)
Storage limit (5M)
The client is completed and will not request the server to process
sessionStorage data cannot be shared between pages, but localStorage can be shared between pages
Application of sessionStorage:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> window.onload = function(){ var aInput = document.getElementsByTagName('input'); aInput[0].onclick = function(){ //sessionStorage: 臨時(shí)存儲(chǔ), 只在當(dāng)前頁(yè)面有效,不能傳遞到其他頁(yè)面,頁(yè)面關(guān)閉之后消失 window.sessionStorage.setItem("name", aInput[3].value ); }; aInput[1].onclick = function(){ alert(window.sessionStorage.getItem("name" )); }; aInput[2].onclick = function(){ window.sessionStorage.removeItem("name" ); }; } </script> </head> <body> <input type="button" value="設(shè)置" /> <input type="button" value="獲取" /> <input type="button" value="刪除" /> <br/> <input type="text" /> </body> </html>
##Application of localStorage
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> window.onload = function(){ var aInput = document.getElementsByTagName('input'); aInput[0].onclick = function(){ //localStorage : 永久性存儲(chǔ) window.localStorage.setItem("name", aInput[3].value); window.localStorage.setItem("name2", 'aaaaa'); }; aInput[1].onclick = function(){ alert( window.localStorage.getItem( "name" ) ); alert( window.localStorage.getItem( "name2" ) ); }; aInput[2].onclick = function(){ window.localStorage.removeItem("name"); // window.localStorage.clear(); }; } </script> </head> <body> <input type="button" value="設(shè)置" /> <input type="button" value="獲取" /> <input type="button" value="刪除" /> <br/> <input type="text" /> </body> </html>rrree
The above is the detailed content of HTML5 local storage application sessionStorage and localStorage. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

The core features of HTML5 include semantic tags, multimedia support, offline storage and local storage, and form enhancement. 1. Semantic tags such as, etc. to improve code readability and SEO effect. 2. Simplify multimedia embedding with labels. 3. Offline storage and local storage such as ApplicationCache and LocalStorage support network-free operation and data storage. 4. Form enhancement introduces new input types and verification properties to simplify processing and verification.

H5 is HTML5, the fifth version of HTML. HTML5 improves the expressiveness and interactivity of web pages, introduces new features such as semantic tags, multimedia support, offline storage and Canvas drawing, and promotes the development of Web technology.

H5 brings a number of new functions and capabilities, greatly improving the interactivity and development efficiency of web pages. 1. Semantic tags such as enhance SEO. 2. Multimedia support simplifies audio and video playback through and tags. 3. Canvas drawing provides dynamic graphics drawing tools. 4. Local storage simplifies data storage through localStorage and sessionStorage. 5. The geolocation API facilitates the development of location-based services.

HTML5isamajorrevisionoftheHTMLstandardthatrevolutionizeswebdevelopmentbyintroducingnewsemanticelementsandcapabilities.1)ItenhancescodereadabilityandSEOwithelementslike,,,and.2)HTML5enablesricher,interactiveexperienceswithoutplugins,allowingdirectembe

The methods of building a website in HTML5 include: 1. Use semantic tags to define the web page structure, such as, , etc.; 2. Embed multimedia content, use and tags; 3. Apply advanced functions such as form verification and local storage. Through these steps, you can create a modern web page with clear structure and rich features.

The main differences between HTML5 (H5) and older versions of HTML include: 1) H5 introduces semantic tags, 2) supports multimedia content, and 3) provides offline storage functions. H5 enhances the functionality and expressiveness of web pages through new tags and APIs, such as and tags, improving user experience and SEO effects, but need to pay attention to compatibility issues.

HTML5hasseverallimitationsincludinglackofsupportforadvancedgraphics,basicformvalidation,cross-browsercompatibilityissues,performanceimpacts,andsecurityconcerns.1)Forcomplexgraphics,HTML5'scanvasisinsufficient,requiringlibrarieslikeWebGLorThree.js.2)I

HTML5aimstoenhancewebdevelopmentanduserexperiencethroughsemanticstructure,multimediaintegration,andperformanceimprovements.1)Semanticelementslike,,,andimprovereadabilityandaccessibility.2)andtagsallowseamlessmultimediaembeddingwithoutplugins.3)Featur
