హెచ్ఎంఎల్ స్థానిక స్టోరేజీ

హెచ్ఎంఎల్ స్థానిక స్టోరేజీ: కుకీల కంటే మెరుగు.

ఏమిటి హెచ్ఎంఎల్ స్థానిక స్టోరేజీ?

స్థానిక స్టోరేజీ (Local Storage) ద్వారా, వెబ్ అనువర్తనం వినియోగదారి బ్రౌజర్లో డాటాను స్థానికంగా స్టోరేజీ చేయవచ్చు.

HTML5 ముందు, అనువర్తనం డాటా కేవలం కుకీలో స్టోరేజీ చేయబడుతుంది, ప్రతి సర్వర్ అభ్యర్ధనకు ఉంటుంది. స్థానిక స్టోరేజీ మరింత సురక్షితం మరియు వెబ్ సైట్ పనితీరును ప్రభావితం చేయకుండా పెద్ద డాటాను స్థానికంగా స్టోరేజీ చేయవచ్చు.

కుకీల విషయంలో స్టోరేజీ పరిమితి చాలా పెద్దది (కనీసం 5MB), మరియు సమాచారం సర్వర్కు అందించబడదు.

స్థానిక స్టోరేజీ మూలం (origin) ద్వారా (డొమైన్ మరియు ప్రొటోకాల్ ద్వారా) జరుగుతుంది. అన్ని పేజీలు, మూలం నుండి, అదే డాటాను స్టోరేజీ మరియు ప్రాప్యత కలిగి ఉంటాయి.

బ్రౌజర్ మద్దతు

పట్టికలో ఉన్న పేరికి ప్రతిపాదించబడిన పట్టికలో సంపూర్ణంగా స్థానిక నిల్వను మద్దతు ఇచ్చే బ్రౌజర్ సంస్కరణలు పేర్కొనబడినవి.

API
Web Storage 4.0 8.0 3.5 4.0 11.5

HTML స్థానిక నిల్వ ఆబ్జెక్ట్

HTML స్థానిక నిల్వ యొక్క రెండు ఆబ్జెక్ట్లు అందిస్తుంది కానీ కెంపై స్టోరేజ్ డాటా ని కెంపై స్టోరేజ్ డాటా ని స్టోరేజ్ చేయడానికి కాదు:

  • window.localStorage - పరిమితి లేని డాటా నిల్వ
  • window.sessionStorage - ఒక సెషన్ కోసం డాటా నిల్వ చేయడానికి (బ్రౌజర్ టాగ్ పేజెస్ మూసినప్పుడు డాటా తొలగిస్తారు)

స్థానిక నిల్వను వాడటం లో, localStorage మరియు sessionStorage యొక్క బ్రౌజర్ మద్దతును పరిశీలించండి:

if (typeof(Storage) !== "undefined") {
    // localStorage/sessionStorage కోసం కోడ్
} else {
    // క్షమించండి! Web Storage మద్దతు లేదు ..
}

localStorage ఆబ్జెక్ట్

localStorage ఆబ్జెక్ట్ లో నిల్వ చేయబడినది ఎప్పుడూ పరిమితి లేదు. బ్రౌజర్ మూసినప్పుడు దానిని తొలగించబడదు. రోజు, వారం లేదా నెలలో అది లభిస్తుంది.

ఉదాహరణ

// నిల్వ
localStorage.setItem("lastname", "Gates");
// తీసుకునే ది
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

స్వయంగా ప్రయత్నించండి

ఉదాహరణ వివరణం:

  • localStorage యొక్క పేరు/విలువ పార్ సృష్టించండి, అక్కడ పేరు="lastname", విలువ="Gates"
  • బుల్లర్ "lastname" యొక్క విలువను తీసుకుని అది id="result" యొక్క కెల్లీకి పోండి

ప్రధాన ఉదాహరణ కాకుండా ఇలా కూడా వ్రాయవచ్చు:

// నిల్వ
localStorage.lastname = "Gates";
// తీసుకునే ది
document.getElementById("result").innerHTML = localStorage.lastname;

బుల్లర్ "lastname" localStorage ప్రాజెక్ట్ యొక్క సింటాక్స్ ఇలా ఉంటుంది:

localStorage.removeItem("lastname");

కమెంట్: పేరు/విలువ పార్ ని స్ట్రింగ్ లో నిల్వ చేయబడింది. మరియు దానిని ఇతర ఫార్మాట్ లో మార్చడానికి చూసుకోండి!

ఈ ఉదాహరణ వినియోగదారులు బటన్ నొక్కడానికి సంఖ్యను లెక్కిస్తుంది. కోడ్ లో, విలువ స్ట్రింగ్ మరియు క్రమంగా లెక్కను పెంచుతారు:

ఉదాహరణ

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "మీరు ఈ బటన్ ను క్లిక్ చేశారు అని " +
localStorage.clickcount + " సార్లు.";

స్వయంగా ప్రయత్నించండి

sessionStorage ఆబ్జెక్ట్

sessionStorage ఆబ్జెక్ట్ localStorage ఆబ్జెక్ట్ అని సమానం, కానీ కేవలం ఒక సెషన్లో డేటా నిల్వ ఉంటుంది. వినియోగదారుడు ప్రత్యేక బ్రౌజర్ టాగ్ పేజీని మూసినప్పుడు, డేటా కూడా తొలగిస్తాయి.

ఈ ఉదాహరణలో, కరణలో వినియోగదారుని బటన్ క్లిక్లను పరిసంఖ్యలు చేస్తుంది:

ఉదాహరణ

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "ఈ session లో, మీరు ఈ బటన్ ను క్లిక్ చేశారు అని " +
sessionStorage.clickcount + " సార్లు.";

స్వయంగా ప్రయత్నించండి