HTML5 – Storage

HTML5 – Storage:
HTML5-ல் பல்வேறு தகவல்களை browser-க்குள்ளேயே சேமிக்கலாம். அதிக அளவிலான தகவல்களை சேமித்தாலும், அவை தேவையான போது மட்டுமே பயன்படுத்தப்படுவதால் வேகம் சிறிதும் குறைவதில்லை. இதில் இருவகையான சேமிப்பு வகைகள் உள்ளன. அவை,
Local Storage : இதில் தகவல்கள் நிரந்தரமாக சேமிக்கப்படுகின்றன.
Session Storage : இதில் தகவல்கள் ஒரு session-ல் மட்டும் அதாவது பயனர் browser-ஐ மூடும் வரை மட்டும் சேமிக்கப்படுகின்றன. பின் அவை அழிக்கப்படுகின்றன.
Cookies: HTML4-ல் இதுபோல தகவல்களை சேமிக்க cookies பயன்பட்டன. இது இணையதளத்திற்கும் browser-க்கும் இடையே உள்ள ஒரு text file ஆகும். இதில் பல குறைகள் உள்ளன.
1. ஒவ்வொரு request-க்கும் இந்த மொத்த cookie file-ம் சேர்த்தே அனுப்பப்படுகிறது. இதனால் வேகம் வெகுவாகக் குறைக்கிறது.
2. 4KB அளவிலான தகவல்களை மட்டுமே சேமிக்க முடியும்.
3. பாதுகாப்பு காரணங்களுக்காக ஒவ்வொருவரும் cookie-ஐ தமது browser-ல் முடக்கி வைத்திருப்பார்.
இத்தகைய குறைகளை HTML5-ன் Local storage தீர்கிறது.
Local Storage: தகவல்களை local storage-ல் சேர்க்க மாற்ற அழிக்க javascript-ஐப் பயன்படுத்தலாம்.
setItem (key,value) – இது புது தகவலை key=value என்ற முறையில் சேர்க்கிறது.
localStorage.setItem("name", "kaniyam"); //name is the key, kaniyam is the value
getItem (key) – இது key-க்கு நிகரான value-ஐ தருகிறது.
sessionStorage.getItem('name'); // name is the key
removeItem (key) – இது key-ன் விவரங்களை அழிக்கிறது.
 localStorage.removeItem("name"); // name is the key
clear() – இது எல்லா தகவல்களையும் அழிக்கிறது.
localStorage.clear();
உதாரணம் :
<script>
    localStorage.setItem("name", "kaniyam"); //saves to the database, key/value
    document.write(localStorage.getItem("name")); //kaniyam!
    localStorage.removeItem("name"); //deletes the matching item from the database
    //Or alternatively you can save a value to the database using this syntax
    localStorage.name= "kaniyam";
</script>
JSon வகை – JSon என்பது Java Script Object Notification. இது பல்வேறு தகவல்களை ஒரு array போல சேமிக்க உதவுகிறது. உதாரணம். Local storage-ல் இந்த JSon வகையிலும் தகவல்களை சேமிக்கலாம். text வகைத் தகவலை JSon-ஆக மாற்றியபின் சேமிக்கலாம். உதாரணம்:
{
"firstName": "Nithya",
"lastName": "Shrinivasan",
"age": 30,
"phoneNumber": 
[{"type": "home","number": "99--66},{"type": "fax","number":"888-87"}]
}
var complexdata = [1, 2, 3, 4, 5, 6];

// store array data to the localstorage
localStorage.setItem("list_data_key",  JSON.stringify(complexdata));

//Use JSON to retrieve the stored data and convert it 
var storedData = localStorage.getItem("complexdata");
if (storedData) {
  complexdata = JSON.parse(storedData);
}


Storage Events: இந்த storage-களில் தகவலை சேர்க்கும் மாற்றும் அழிக்கும் நிகழ்வுகளை அணுக இந்த events பயன்படுகின்றன. இந்த event-உடன் javascript listener-ஐப் பயன்படுத்த வேண்டும். உதாரணம்:
Session Storage: Browser window மூடும் வரை மட்டுமே சேமிக்கப்படும் விவரங்களை session storage-ல் சேமிக்கலாம். Local storage போலவே சேர்த்தல், மாற்றுதல், அழித்தல் பணிகளை செய்யலாம். உதாரணம் 
JSON வகைத் தகவலையும் சேமிக்கலாம்.
உதாரணம் 
<script>
    sessionStorage.setItem("name", "kaniyam"); //saves to the database, key/value
    document.write(sessionStorage.getItem("name")); //kaniyam!
    sessionStorage.removeItem("name"); //deletes the matching item from the database
    //Or alternatively you can save a value to the database using this syntax
    sessionStorage.name= "kaniyam";
</script>

Leave a Reply

%d bloggers like this: