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 keyclear() – இது எல்லா தகவல்களையும் அழிக்கிறது.
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>