HTML5 local storage application sessionStorage and localStorage
Aug 19, 2017 pm 02:13 PM
Before 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>rrreeThe 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
Understanding H5: The Meaning and Significance
May 11, 2025 am 12:19 AM
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.
Significant Goals of HTML5: Enhancing Web Development and User Experience
May 14, 2025 am 12:18 AM
HTML5aimstoenhancewebdevelopmentanduserexperiencethroughsemanticstructure,multimediaintegration,andperformanceimprovements.1)Semanticelementslike,,,andimprovereadabilityandaccessibility.2)andtagsallowseamlessmultimediaembeddingwithoutplugins.3)Featur
What is Microdata? HTML5 Explained
Jun 10, 2025 am 12:09 AM
MicrodataenhancesSEOandcontentdisplayinsearchresultsbyembeddingstructureddataintoHTML.1)Useitemscope,itemtype,anditempropattributestoaddsemanticmeaning.2)ApplyMicrodatatokeycontentlikebooksorproductsforrichsnippets.3)BalanceusagetoavoidclutteringHTML
HTML5 Microdata: The best online tools
Jun 09, 2025 am 12:06 AM
ThebestonlinetoolsforHTML5MicrodataareGoogleStructuredDataMarkupHelperandSchema.org'sMarkupValidator.1)GoogleStructuredDataMarkupHelperisuser-friendly,guidinguserstoaddMicrodatatagsforenhancedSEO.2)Schema.org'sMarkupValidatorchecksMicrodataimplementa
HTML5: Transforming the Web with New Features and Capabilities
May 11, 2025 am 12:12 AM
HTML5transformswebdevelopmentbyintroducingsemanticelements,multimediacapabilities,powerfulAPIs,andperformanceoptimizationtools.1)Semanticelementslike,,,andenhanceSEOandaccessibility.2)Multimediaelementsandallowdirectembeddingwithoutplugins,improvingu
HTML5: Goals in 2024
May 13, 2025 am 12:13 AM
HTML5'sgoalsin2024focusonrefinementandoptimization,notnewfeatures.1)Enhanceperformanceandefficiencythroughoptimizedrendering.2)Improveaccessibilitywithrefinedattributesandelements.3)Addresssecurityconcerns,particularlyXSS,withwiderCSPadoption.4)Ensur
The Aims of HTML5: Creating a More Powerful and Accessible Web
May 14, 2025 am 12:18 AM
HTML5aimstoenhancewebcapabilities,makingitmoredynamic,interactive,andaccessible.1)Itsupportsmultimediaelementslikeand,eliminatingtheneedforplugins.2)Semanticelementsimproveaccessibilityandcodereadability.3)Featureslikeenablepowerful,responsivewebappl
Goals of HTML5: A Developer's Guide to the Future of the Web
May 11, 2025 am 12:14 AM
The goal of HTML5 is to simplify the development process, improve user experience, and ensure the dynamic and accessible network. 1) Simplify the development of multimedia content by natively supporting audio and video elements; 2) Introduce semantic elements such as, etc. to improve content structure and SEO friendliness; 3) Enhance offline functions through application cache; 4) Use elements to improve page interactivity; 5) Optimize mobile compatibility and support responsive design; 6) Improve form functions and simplify verification process; 7) Provide performance optimization tools such as async and defer attributes.
