25 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);

}


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>

License

Icon for the Creative Commons Attribution-ShareAlike 4.0 International License

எளிய தமிழில் HTML by து. நித்யா is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License, except where otherwise noted.

Feedback/Errata

Leave a Reply

Your email address will not be published.