உலாவி சேமிப்பக மேலாண்மை: ஜாவாஸ்கிரிப்ட் தரவு நிலைத்தன்மை உத்திகள்

வலை மேம்பாட்டுத் துறையில், ஈர்க்கக்கூடிய மற்றும் தடையற்ற பயனர் அனுபவங்களை உருவாக்க தரவு நிலைத்தன்மையை திறம்பட நிர்வகிப்பது மிகவும் முக்கியமானது. ஜாவாஸ்கிரிப்ட் பல உலாவி சேமிப்பக விருப்பங்களை வழங்குகிறது, ஒவ்வொன்றும் அதன் பலம் மற்றும் பலவீனங்களைக் கொண்டுள்ளன. சரியான உத்தியைத் தேர்ந்தெடுப்பது நீங்கள் சேமிக்கும் தரவின் வகை, அதன் உணர்திறன் மற்றும் அதன் ஆயுட்காலம் ஆகியவற்றைப் பொறுத்தது. இந்த விரிவான வழிகாட்டி பல்வேறு ஜாவாஸ்கிரிப்ட் தரவு நிலைத்தன்மை உத்திகளை ஆராய்ந்து, தகவலறிந்த முடிவுகளை எடுக்க உங்களுக்கு உதவ நடைமுறை எடுத்துக்காட்டுகள் மற்றும் நுண்ணறிவுகளை வழங்கும்.

தரவு நிலைத்தன்மையின் தேவையைப் புரிந்துகொள்ளுதல்

தரவு நிலைத்தன்மை என்பது, பயனர் உலாவியை மூடிய பிறகும் அல்லது பக்கத்தை விட்டு வெளியேறிய பிறகும் ஒரு வலைப் பயன்பாடு தரவைத் தக்க வைத்துக் கொள்ளும் திறனைக் குறிக்கிறது. இது பல காரணங்களுக்காக அவசியம்:

• மேம்படுத்தப்பட்ட பயனர் அனுபவம்: பயனர் விருப்பத்தேர்வுகள், ஷாப்பிங் கார்ட் பொருட்கள் அல்லது உள்நுழைவு சான்றுகளை நினைவில் வைத்திருப்பது, பயனர்கள் மீண்டும் மீண்டும் அதே தகவலை உள்ளிட வேண்டிய தேவையை நீக்குகிறது, இது மிகவும் வசதியான மற்றும் தனிப்பயனாக்கப்பட்ட அனுபவத்திற்கு வழிவகுக்கிறது. டோக்கியோவில் உள்ள ஒரு பயனர் தனது ஷாப்பிங் கார்ட்டில் பொருட்களைச் சேர்ப்பதை கற்பனை செய்து பாருங்கள். தரவு நிலைத்தன்மை, உலாவியை மூடிய பிறகும், பின்னர் திரும்பி வந்து தங்கள் கார்ட்டை அப்படியே கண்டுபிடிக்க அனுமதிக்கிறது.
• ஆஃப்லைன் செயல்பாடு: சில வலைப் பயன்பாடுகள், குறிப்பாக முற்போக்கு வலைப் பயன்பாடுகள் (PWAs), ஆஃப்லைன் செயல்பாடு தேவை. உலாவி சேமிப்பகம் தரவை உள்ளூரில் சேமிக்க அனுமதிக்கிறது, இணைய இணைப்பு இல்லாவிட்டாலும் சில அம்சங்களை பயனர்கள் அணுக உதவுகிறது. அர்ஜென்டினாவின் தொலைதூரப் பகுதிகள் அல்லது இந்தியாவின் கிராமப்புறங்களின் சில பகுதிகள் போன்ற நம்பகத்தன்மையற்ற இணைய அணுகல் உள்ள பகுதிகளில் உள்ள பயனர்களுக்கு இது குறிப்பாக பயனுள்ளதாக இருக்கும்.
• செயல்திறன் மேம்படுத்தல்: உலாவியில் அடிக்கடி அணுகப்படும் தரவை கேச் செய்வது சேவையகத்திற்கான கோரிக்கைகளின் எண்ணிக்கையைக் குறைப்பதன் மூலம் பயன்பாட்டின் செயல்திறனை கணிசமாக மேம்படுத்தும். எடுத்துக்காட்டாக, ஒரு செய்தி இணையதளம் கட்டுரை உள்ளடக்கத்தை உள்ளூரில் சேமித்து, திரும்பி வரும் பயனர்களுக்கு வேகமான ஏற்றுதல் நேரங்களை வழங்க முடியும்.
• தனிப்பயனாக்கம்: காட்சி அமைப்புகள் அல்லது மொழி விருப்பத்தேர்வுகள் போன்ற பயனர் சார்ந்த தரவைச் சேமிப்பது, வலைத்தளங்கள் பயனர் அனுபவத்தைத் தனிப்பயனாக்கவும், தனிப்பட்ட தேவைகளுக்கு ஏற்ப உள்ளடக்கத்தை வடிவமைக்கவும் அனுமதிக்கிறது. இது மாட்ரிட்டில் உள்ள ஒரு பயனருக்காக வலைத்தளத்தை ஸ்பானிஷ் மொழியில் காண்பிப்பதில் இருந்து பாரிஸில் உள்ள ஒரு பயனருக்கு விலைகளை யூரோக்களில் காண்பிப்பது வரை இருக்கலாம்.

ஜாவாஸ்கிரிப்ட் உலாவி சேமிப்பக விருப்பங்களின் கண்ணோட்டம்

ஜாவாஸ்கிரிப்ட் பல்வேறு உலாவி சேமிப்பக விருப்பங்களை வழங்குகிறது, ஒவ்வொன்றும் வெவ்வேறு பண்புகள் மற்றும் பயன்பாட்டு நிகழ்வுகளைக் கொண்டுள்ளன. இதோ ஒரு சுருக்கமான கண்ணோட்டம்:

• குக்கீகள்: உள்நுழைவு விவரங்கள் அல்லது ஷாப்பிங் கார்ட் பொருட்கள் போன்ற பயனர்களைப் பற்றிய தகவல்களை நினைவில் கொள்ள வலைத்தளங்கள் ஒரு பயனரின் கணினியில் சேமிக்கும் சிறிய உரை கோப்புகள்.
• லோக்கல் ஸ்டோரேஜ்: ஒரு வலை சேமிப்பக ஏபிஐ, இது வலைத்தளங்களை உலாவியில் முக்கிய-மதிப்பு ஜோடிகளை தொடர்ந்து சேமிக்க அனுமதிக்கிறது. லோக்கல் ஸ்டோரேஜில் சேமிக்கப்பட்ட தரவு உலாவி மூடப்பட்டு மீண்டும் திறக்கப்பட்ட பிறகும் கிடைக்கும்.
• செஷன் ஸ்டோரேஜ்: லோக்கல் ஸ்டோரேஜ் போன்றது, ஆனால் தரவு பயனரின் அமர்வின் காலத்திற்கு மட்டுமே சேமிக்கப்படும். உலாவி சாளரம் மூடப்படும்போது, தரவு தானாகவே நீக்கப்படும்.
• IndexedDB: ஒரு சக்திவாய்ந்த, NoSQL-பாணி தரவுத்தளம், இது வலைத்தளங்கள் உலாவியில் பெரிய அளவிலான கட்டமைக்கப்பட்ட தரவை சேமிக்க அனுமதிக்கிறது.
• கேச் ஏபிஐ: HTTP கோரிக்கைகள் மற்றும் பதில்களை கேச் செய்வதற்கான ஒரு வலை ஏபிஐ, இது முதன்மையாக ஆஃப்லைன் செயல்பாடு மற்றும் செயல்திறனை மேம்படுத்தப் பயன்படுகிறது.

குக்கீகள்: பாரம்பரிய அணுகுமுறை

குக்கீகள் என்றால் என்ன?

குக்கீகள் என்பவை வலைத்தளங்கள் பயனரின் கணினியில் சேமிக்கும் சிறிய உரை கோப்புகளாகும், அவை பயனரைப் பற்றிய தகவல்களை நினைவில் வைத்துக்கொள்ள உதவுகின்றன. அவை பெரும்பாலும் அமர்வு மேலாண்மை, தனிப்பயனாக்கம் மற்றும் கண்காணிப்புக்கு பயன்படுத்தப்படுகின்றன. குக்கீகள் நீண்ட காலமாக பயன்பாட்டில் இருந்தாலும், அவற்றுக்கு சில வரம்புகள் உள்ளன, மேலும் அவை நவீன சேமிப்பக விருப்பங்களால் படிப்படியாக மாற்றப்பட்டு வருகின்றன.

குக்கீ பண்புக்கூறுகள்

குக்கீகள் அவற்றின் நடத்தையைக் கட்டுப்படுத்தும் பல பண்புக்கூறுகளைக் கொண்டுள்ளன:

• Name: குக்கீயின் பெயர்.
• Value: குக்கீயின் மதிப்பு.
• Domain: குக்கீ செல்லுபடியாகும் டொமைன்.
• Path: குக்கீ செல்லுபடியாகும் டொமைனுக்குள் உள்ள பாதை.
• Expires: குக்கீ காலாவதியாகும் தேதி மற்றும் நேரம். இது குறிப்பிடப்படாவிட்டால், குக்கீ ஒரு அமர்வு குக்கீயாக இருக்கும் மற்றும் உலாவி மூடப்படும்போது நீக்கப்படும்.
• Secure: குக்கீ HTTPS வழியாக மட்டுமே அனுப்பப்பட வேண்டும் என்று குறிப்பிடுகிறது.
• HttpOnly: ஜாவாஸ்கிரிப்ட் மூலம் குக்கீ அணுகப்படுவதைத் தடுக்கிறது, இது தளங்களுக்கு இடையேயான ஸ்கிரிப்டிங் (XSS) தாக்குதல்களின் அபாயத்தைக் குறைக்கிறது.
• SameSite: தளங்களுக்கு இடையேயான கோரிக்கைகளுடன் குக்கீ அனுப்பப்படுகிறதா என்பதைக் கட்டுப்படுத்துகிறது. விருப்பங்களில் Strict, Lax, மற்றும் None ஆகியவை அடங்கும்.

ஜாவாஸ்கிரிப்டில் குக்கீகளை அமைத்தல் மற்றும் மீட்டெடுத்தல்

நீங்கள் document.cookie பண்பைப் பயன்படுத்தி குக்கீகளை அமைக்கலாம் மற்றும் மீட்டெடுக்கலாம்:

            
// Setting a cookie
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2024 12:00:00 UTC; path=/";

// Retrieving cookies
const cookies = document.cookie;
console.log(cookies);

            

              
                Copy
              
            
          

குக்கீகளின் வரம்புகள்

குக்கீகளுக்கு பல வரம்புகள் உள்ளன:

• அளவு வரம்பு: குக்கீகள் ஒரு வரையறுக்கப்பட்ட சேமிப்புத் திறனைக் கொண்டுள்ளன (சுமார் 4KB).
• பாதுகாப்பு கவலைகள்: குக்கீகள் XSS மற்றும் CSRF தாக்குதல்களுக்கு ஆளாக நேரிடும்.
• செயல்திறன் கூடுதல் சுமை: குக்கீகள் ஒவ்வொரு HTTP கோரிக்கையிலும் சேர்க்கப்படுகின்றன, இது குறிப்பாக மொபைல் நெட்வொர்க்குகளில் கூடுதல் சுமையை ஏற்படுத்தும்.
• தனியுரிமை கவலைகள்: பயனர்களின் உலாவல் செயல்பாட்டைக் கண்காணிக்க குக்கீகள் பெரும்பாலும் பயன்படுத்தப்படுகின்றன, இது தனியுரிமை கவலைகளை எழுப்புகிறது.

குக்கீகளை எப்போது பயன்படுத்த வேண்டும்

அவற்றின் வரம்புகள் இருந்தபோதிலும், குக்கீகள் சில சூழ்நிலைகளில் இன்னும் பயனுள்ளதாக இருக்கும்:

• அமர்வு மேலாண்மை: உள்நுழைந்த பயனர்களை அடையாளம் கண்டு அவர்களின் அமர்வைப் பராமரித்தல்.
• தனிப்பயனாக்கம்: மொழி அல்லது தீம் அமைப்புகள் போன்ற பயனர் விருப்பங்களைச் சேமித்தல்.
• கண்காணிப்பு: வலைத்தள போக்குவரத்து மற்றும் பயனர் நடத்தையை பகுப்பாய்வு செய்தல் (பொருத்தமான ஒப்புதலுடன்).

லோக்கல் ஸ்டோரேஜ்: நிலையான முக்கிய-மதிப்பு சேமிப்பகம்

லோக்கல் ஸ்டோரேஜ் என்றால் என்ன?

லோக்கல் ஸ்டோரேஜ் என்பது ஒரு வலை சேமிப்பக ஏபிஐ ஆகும், இது வலைத்தளங்களை உலாவியில் முக்கிய-மதிப்பு ஜோடிகளை தொடர்ந்து சேமிக்க அனுமதிக்கிறது. குக்கீகளைப் போலல்லாமல், லோக்கல் ஸ்டோரேஜ் கணிசமாக அதிக சேமிப்பிடத்தை (பொதுவாக ஒரு டொமைனுக்கு 5-10MB) வழங்குகிறது மற்றும் ஒவ்வொரு HTTP கோரிக்கையிலும் சேர்க்கப்படவில்லை.

ஜாவாஸ்கிரிப்டில் லோக்கல் ஸ்டோரேஜ் பயன்படுத்துதல்

நீங்கள் window.localStorage பொருள் மூலம் லோக்கல் ஸ்டோரேஜை அணுகலாம்:

            
// Setting a value
localStorage.setItem("username", "John Doe");

// Getting a value
const username = localStorage.getItem("username");
console.log(username); // Output: John Doe

// Removing a value
localStorage.removeItem("username");

// Clearing all values
localStorage.clear();

            

              
                Copy
              
            
          

லோக்கல் ஸ்டோரேஜின் நன்மைகள்

• பெரிய சேமிப்புத் திறன்: குக்கீகளை விட கணிசமாக அதிக சேமிப்பிடம்.
• நிலைத்தன்மை: உலாவி மூடப்பட்டு மீண்டும் திறக்கப்பட்ட பிறகும் தரவு கிடைக்கும்.
• பாதுகாப்பு: தரவு உள்ளூரில் சேமிக்கப்படுகிறது மற்றும் ஒவ்வொரு HTTP கோரிக்கையிலும் அனுப்பப்படுவதில்லை.
• எளிமை: தரவைச் சேமிப்பதற்கும் மீட்டெடுப்பதற்கும் பயன்படுத்த எளிதான ஏபிஐ.

லோக்கல் ஸ்டோரேஜின் வரம்புகள்

• ஒத்திசைவானது: செயல்பாடுகள் ஒத்திசைவானவை, இது பிரதான த்ரெட்டைத் தடுத்து செயல்திறனைப் பாதிக்கலாம்.
• சரம்-அடிப்படையிலானது: மதிப்புகள் சரங்களாக சேமிக்கப்படுகின்றன, எனவே நீங்கள் JSON.stringify() மற்றும் JSON.parse() ஐப் பயன்படுத்தி சிக்கலான தரவுக் கட்டமைப்புகளை சீரியலைஸ் மற்றும் டீசீரியலைஸ் செய்ய வேண்டியிருக்கும்.
• டொமைன்-குறிப்பானது: தரவை சேமித்த டொமைனால் மட்டுமே அணுக முடியும்.
• உணர்திறன் வாய்ந்த தரவுகளுக்கு ஏற்றது அல்ல: தரவு குறியாக்கம் செய்யப்படவில்லை, எனவே கடவுச்சொற்கள் போன்ற உணர்திறன் வாய்ந்த தகவல்களை சேமிக்க இது பொருத்தமானது அல்ல.

லோக்கல் ஸ்டோரேஜை எப்போது பயன்படுத்த வேண்டும்

லோக்கல் ஸ்டோரேஜ் சேமிக்க ஏற்றது:

• பயனர் விருப்பத்தேர்வுகள்: தீம் அமைப்புகள், மொழி விருப்பத்தேர்வுகள், காட்சி விருப்பங்கள்.
• பயன்பாட்டு நிலை: ஷாப்பிங் கார்ட் பொருட்கள், படிவத் தரவு, விளையாட்டு முன்னேற்றம்.
• கேச் செய்யப்பட்ட தரவு: செயல்திறனை மேம்படுத்த அடிக்கடி அணுகப்படும் தரவு.

எடுத்துக்காட்டு: பயனர் தீம் விருப்பத்தை நினைவில் வைத்திருத்தல்

            
// Function to set the theme
function setTheme(theme) {
  document.documentElement.className = theme;
  localStorage.setItem("theme", theme);
}

// Function to get the stored theme
function getTheme() {
  const theme = localStorage.getItem("theme");
  if (theme) {
    setTheme(theme);
  }
}

// Call getTheme on page load
getTheme();

// Example usage: Setting the theme to "dark"
setTheme("dark");

            

              
                Copy
              
            
          

செஷன் ஸ்டோரேஜ்: தற்காலிக முக்கிய-மதிப்பு சேமிப்பகம்

செஷன் ஸ்டோரேஜ் என்றால் என்ன?

செஷன் ஸ்டோரேஜ் என்பது லோக்கல் ஸ்டோரேஜ் போன்ற மற்றொரு வலை சேமிப்பக ஏபிஐ ஆகும், ஆனால் தரவு பயனரின் அமர்வின் காலத்திற்கு மட்டுமே சேமிக்கப்படுகிறது. உலாவி சாளரம் அல்லது தாவல் மூடப்படும்போது, தரவு தானாகவே நீக்கப்படும். இது தற்போதைய அமர்வின் போது மட்டுமே தேவைப்படும் தற்காலிக தரவைச் சேமிக்க செஷன் ஸ்டோரேஜை பொருத்தமானதாக ஆக்குகிறது.

ஜாவாஸ்கிரிப்டில் செஷன் ஸ்டோரேஜ் பயன்படுத்துதல்

நீங்கள் window.sessionStorage பொருள் மூலம் செஷன் ஸ்டோரேஜை அணுகலாம், இது லோக்கல் ஸ்டோரேஜ் போன்ற அதே ஏபிஐ-ஐக் கொண்டுள்ளது:

            
// Setting a value
sessionStorage.setItem("sessionID", "1234567890");

// Getting a value
const sessionID = sessionStorage.getItem("sessionID");
console.log(sessionID); // Output: 1234567890

// Removing a value
sessionStorage.removeItem("sessionID");

// Clearing all values
sessionStorage.clear();

            

              
                Copy
              
            
          

செஷன் ஸ்டோரேஜின் நன்மைகள்

• தானியங்கி நீக்கம்: அமர்வு முடிவடையும் போது தரவு தானாகவே நீக்கப்படும்.
• பாதுகாப்பு: தரவு உள்ளூரில் சேமிக்கப்படுகிறது மற்றும் ஒவ்வொரு HTTP கோரிக்கையிலும் அனுப்பப்படுவதில்லை.
• எளிமை: தரவைச் சேமிப்பதற்கும் மீட்டெடுப்பதற்கும் பயன்படுத்த எளிதான ஏபிஐ.

செஷன் ஸ்டோரேஜின் வரம்புகள்

• வரையறுக்கப்பட்ட ஆயுட்காலம்: தரவு அமர்வின் காலத்திற்கு மட்டுமே சேமிக்கப்படுகிறது.
• ஒத்திசைவானது: செயல்பாடுகள் ஒத்திசைவானவை, இது பிரதான த்ரெட்டைத் தடுத்து செயல்திறனைப் பாதிக்கலாம்.
• சரம்-அடிப்படையிலானது: மதிப்புகள் சரங்களாக சேமிக்கப்படுகின்றன, எனவே நீங்கள் JSON.stringify() மற்றும் JSON.parse() ஐப் பயன்படுத்தி சிக்கலான தரவுக் கட்டமைப்புகளை சீரியலைஸ் மற்றும் டீசீரியலைஸ் செய்ய வேண்டியிருக்கும்.
• டொமைன்-குறிப்பானது: தரவை சேமித்த டொமைனால் மட்டுமே அணுக முடியும்.
• உணர்திறன் வாய்ந்த தரவுகளுக்கு ஏற்றது அல்ல: தரவு குறியாக்கம் செய்யப்படவில்லை, எனவே கடவுச்சொற்கள் போன்ற உணர்திறன் வாய்ந்த தகவல்களை சேமிக்க இது பொருத்தமானது அல்ல.

செஷன் ஸ்டோரேஜை எப்போது பயன்படுத்த வேண்டும்

செஷன் ஸ்டோரேஜ் சேமிக்க ஏற்றது:

• தற்காலிக தரவு: படிவத் தரவு அல்லது தற்காலிக ஷாப்பிங் கார்ட் பொருட்கள் போன்ற தற்போதைய அமர்வின் போது மட்டுமே தேவைப்படும் தரவு.
• உணர்திறன் வாய்ந்த தரவு: அமர்வு ஐடிகள் அல்லது அங்கீகார டோக்கன்கள் போன்ற தொடர்ந்து சேமிக்கக் கூடாத தரவு (இருப்பினும் குறியாக்கம் இன்னும் பரிந்துரைக்கப்படுகிறது).

எடுத்துக்காட்டு: தற்காலிக படிவத் தரவைச் சேமித்தல்

            
// Function to save form data to session storage
function saveFormData(formData) {
  sessionStorage.setItem("formData", JSON.stringify(formData));
}

// Function to retrieve form data from session storage
function getFormData() {
  const formDataString = sessionStorage.getItem("formData");
  if (formDataString) {
    return JSON.parse(formDataString);
  }
  return null;
}

// Example usage: Saving form data
const formData = {
  name: "John Doe",
  email: "john.doe@example.com"
};
saveFormData(formData);

// Retrieving form data
const retrievedFormData = getFormData();
console.log(retrievedFormData); // Output: {name: "John Doe", email: "john.doe@example.com"}

            

              
                Copy
              
            
          

IndexedDB: ஒரு சக்திவாய்ந்த கிளையன்ட்-பக்க தரவுத்தளம்

IndexedDB என்றால் என்ன?

IndexedDB என்பது ஒரு சக்திவாய்ந்த, NoSQL-பாணி தரவுத்தளம் ஆகும், இது வலைத்தளங்களை உலாவியில் பெரிய அளவிலான கட்டமைக்கப்பட்ட தரவை சேமிக்க அனுமதிக்கிறது. லோக்கல் ஸ்டோரேஜ் மற்றும் செஷன் ஸ்டோரேஜ் போலல்லாமல், IndexedDB ஒத்திசைவற்றது மற்றும் பரிவர்த்தனை சார்ந்தது, இது சிக்கலான தரவு மேலாண்மை காட்சிகளுக்கு ஏற்றதாக அமைகிறது.

IndexedDB-இன் முக்கிய கருத்துக்கள்

• தரவுத்தளம்: தரவைச் சேமிப்பதற்கான ஒரு கொள்கலன்.
• பொருள் ஸ்டோர்: ஒரு தொடர்புடைய தரவுத்தளத்தில் உள்ள ஒரு அட்டவணை போன்ற பதிவுகளின் தொகுப்பு.
• குறியீட்டெண்: ஒரு பொருள் ஸ்டோரில் உள்ள பதிவுகளை திறமையாக தேட உங்களை அனுமதிக்கும் ஒரு தரவுக் கட்டமைப்பு.
• பரிவர்த்தனை: ஒரு அலகாக செய்யப்படும் செயல்பாடுகளின் வரிசை. எந்தவொரு செயல்பாடும் தோல்வியுற்றால், முழு பரிவர்த்தனையும் திரும்பப் பெறப்படும்.
• கர்சர்: ஒரு பொருள் ஸ்டோர் அல்லது குறியீட்டெண்ணில் உள்ள பதிவுகளை மீண்டும் மீண்டும் செய்ய உங்களை அனுமதிக்கும் ஒரு பொருள்.

ஜாவாஸ்கிரிப்டில் IndexedDB-ஐப் பயன்படுத்துதல்

IndexedDB லோக்கல் ஸ்டோரேஜ் மற்றும் செஷன் ஸ்டோரேஜை விட சிக்கலான ஏபிஐ-ஐக் கொண்டுள்ளது, ஆனால் இது அதிக நெகிழ்வுத்தன்மையையும் செயல்திறனையும் வழங்குகிறது.

            
// Opening a database
const request = indexedDB.open("myDatabase", 1);

request.onerror = (event) => {
  console.error("Error opening database:", event);
};

request.onsuccess = (event) => {
  const db = event.target.result;
  console.log("Database opened successfully");
  // Perform database operations here
};

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  // Create an object store if it doesn't exist
  if (!db.objectStoreNames.contains("myObjectStore")) {
    const objectStore = db.createObjectStore("myObjectStore", { keyPath: "id" });
    objectStore.createIndex("name", "name", { unique: false });
  }
};

// Adding data to the object store
function addData(db, data) {
  const transaction = db.transaction(["myObjectStore"], "readwrite");
  const objectStore = transaction.objectStore("myObjectStore");
  const request = objectStore.add(data);

  request.onsuccess = () => {
    console.log("Data added successfully");
  };

  request.onerror = (event) => {
    console.error("Error adding data:", event);
  };

  transaction.oncomplete = () => {
    console.log("Transaction completed");
  };
}

// Retrieving data from the object store
function getData(db, id) {
  const transaction = db.transaction(["myObjectStore"], "readonly");
  const objectStore = transaction.objectStore("myObjectStore");
  const request = objectStore.get(id);

  request.onsuccess = () => {
    const data = request.result;
    console.log("Data retrieved successfully:", data);
  };

  request.onerror = (event) => {
    console.error("Error retrieving data:", event);
  };
}

// Example usage:
const data = {
  id: 1,
  name: "John Doe",
  email: "john.doe@example.com"
};

request.onsuccess = (event) => {
  const db = event.target.result;
  addData(db, data);
  getData(db, 1);
};

            

              
                Copy
              
            
          

IndexedDB-இன் நன்மைகள்

• பெரிய சேமிப்புத் திறன்: லோக்கல் ஸ்டோரேஜ் மற்றும் செஷன் ஸ்டோரேஜை விட கணிசமாக அதிக தரவை சேமிக்க முடியும்.
• ஒத்திசைவற்றது: செயல்பாடுகள் ஒத்திசைவற்றவை, பிரதான த்ரெட்டைத் தடுப்பதைத் தடுக்கிறது.
• பரிவர்த்தனை சார்ந்தது: தரவு ஒருமைப்பாட்டிற்கான பரிவர்த்தனைகளை ஆதரிக்கிறது.
• குறியீட்டு முறை: திறமையான தரவு மீட்டெடுப்பிற்காக குறியீட்டெண்களை உருவாக்க உங்களை அனுமதிக்கிறது.
• சிக்கலான வினவல்கள்: தரவை வடிகட்டுவதற்கும் வரிசைப்படுத்துவதற்கும் சிக்கலான வினவல்களை ஆதரிக்கிறது.

IndexedDB-இன் வரம்புகள்

• சிக்கலான ஏபிஐ: லோக்கல் ஸ்டோரேஜ் மற்றும் செஷன் ஸ்டோரேஜை விட சிக்கலான ஏபிஐ.
• ஒத்திசைவற்றது: கான்பேக்குகள் அல்லது பிராமிஸ்களுடன் ஒத்திசைவற்ற செயல்பாடுகளைக் கையாள வேண்டும்.
• பதிப்பாக்கம்: தரவுத்தள பதிப்புகள் மற்றும் இடம்பெயர்வுகளை நிர்வகிக்க வேண்டும்.
• உணர்திறன் வாய்ந்த தரவுகளுக்கு ஏற்றது அல்ல: தரவு குறியாக்கம் செய்யப்படவில்லை, எனவே கடவுச்சொற்கள் போன்ற உணர்திறன் வாய்ந்த தகவல்களை சேமிக்க இது பொருத்தமானது அல்ல.

IndexedDB-ஐ எப்போது பயன்படுத்த வேண்டும்

IndexedDB சேமிக்க ஏற்றது:

• பெரிய தரவுத்தொகுப்புகள்: லோக்கல் ஸ்டோரேஜ் மற்றும் செஷன் ஸ்டோரேஜின் சேமிப்புத் திறனைத் தாண்டிய தரவு.
• கட்டமைக்கப்பட்ட தரவு: சிக்கலான வினவல்கள் மற்றும் குறியீட்டு முறை தேவைப்படும் தரவு.
• ஆஃப்லைன் தரவு: ஆஃப்லைனில் கிடைக்க வேண்டிய தரவு.

எடுத்துக்காட்டு: IndexedDB-இல் தயாரிப்புகளின் பட்டியலைச் சேமித்தல்

இந்த எடுத்துக்காட்டு IndexedDB-இல் தயாரிப்புகளின் பட்டியலை எவ்வாறு சேமிப்பது என்பதைக் காட்டுகிறது:

            
// ... (IndexedDB setup code - open database, create object store) ...

// Function to add a product to the object store
function addProduct(db, product) {
  const transaction = db.transaction(["products"], "readwrite");
  const objectStore = transaction.objectStore("products");
  const request = objectStore.add(product);

  // ... (Error and success handling) ...
}

// Example product data
const products = [
  { id: 1, name: "Laptop", price: 1200 },
  { id: 2, name: "Mouse", price: 25 },
  { id: 3, name: "Keyboard", price: 75 }
];

// Add products to the object store
request.onsuccess = (event) => {
  const db = event.target.result;
  products.forEach(product => addProduct(db, product));
};

            

              
                Copy
              
            
          

கேச் ஏபிஐ: HTTP கோரிக்கைகள் மற்றும் பதில்களை கேச் செய்தல்

கேச் ஏபிஐ என்றால் என்ன?

கேச் ஏபிஐ என்பது HTTP கோரிக்கைகள் மற்றும் பதில்களை கேச் செய்வதற்கான ஒரு வலை ஏபிஐ ஆகும். இது முதன்மையாக ஆஃப்லைன் செயல்பாடு மற்றும் செயல்திறனை மேம்படுத்த வளங்களை உலாவியில் உள்ளூரில் சேமிப்பதன் மூலம் பயன்படுத்தப்படுகிறது. கேச் ஏபிஐ பெரும்பாலும் சேவைப் பணியாளர்களுடன் இணைந்து முற்போக்கு வலைப் பயன்பாடுகளை (PWAs) உருவாக்கப் பயன்படுத்தப்படுகிறது.

கேச் ஏபிஐ-இன் முக்கிய கருத்துக்கள்

• கேச்: HTTP பதில்களுக்கான ஒரு சேமிப்பக இடம்.
• கோரிக்கை: ஒரு HTTP கோரிக்கை பொருள்.
• பதில்: ஒரு HTTP பதில் பொருள்.
• CacheStorage: பல கேச்களை நிர்வகிப்பதற்கான ஒரு இடைமுகம்.

ஜாவாஸ்கிரிப்டில் கேச் ஏபிஐ-ஐப் பயன்படுத்துதல்

            
// Opening a cache
caches.open("myCache").then(cache => {
  console.log("Cache opened successfully");

  // Caching a resource
  cache.add("/images/logo.png").then(() => {
    console.log("Resource cached successfully");
  });

  // Caching multiple resources
  cache.addAll([
    "/css/style.css",
    "/js/app.js"
  ]).then(() => {
    console.log("Resources cached successfully");
  });

  // Retrieving a cached response
  cache.match("/images/logo.png").then(response => {
    if (response) {
      console.log("Resource found in cache");
      // Use the cached response
      return response.blob();
    } else {
      console.log("Resource not found in cache");
      // Fetch the resource from the network
    }
  });
});

// Deleting a cache
caches.delete("myCache").then(success => {
  if (success) {
    console.log("Cache deleted successfully");
  } else {
    console.log("Cache not found");
  }
});

            

              
                Copy
              
            
          

கேச் ஏபிஐ-இன் நன்மைகள்

• ஆஃப்லைன் செயல்பாடு: கேச் செய்யப்பட்ட வளங்களை வழங்குவதன் மூலம் பயன்பாடுகள் ஆஃப்லைனில் வேலை செய்ய உதவுகிறது.
• செயல்திறன் மேம்பாடு: நெட்வொர்க் கோரிக்கைகளைக் குறைத்து ஏற்றுதல் நேரங்களை மேம்படுத்துகிறது.
• சேவைப் பணியாளர் ஒருங்கிணைப்பு: PWAs-ஐ உருவாக்க சேவைப் பணியாளர்களுடன் தடையின்றி செயல்படுகிறது.

கேச் ஏபிஐ-இன் வரம்புகள்

• ஒத்திசைவற்றது: பிராமிஸ்களுடன் ஒத்திசைவற்ற செயல்பாடுகளைக் கையாள வேண்டும்.
• சிக்கலான ஏபிஐ: லோக்கல் ஸ்டோரேஜ் மற்றும் செஷன் ஸ்டோரேஜை விட பயன்படுத்த மிகவும் சிக்கலானதாக இருக்கலாம்.
• சேமிப்பக வரம்புகள்: உலாவி மற்றும் சாதனத்தைப் பொறுத்து சேமிப்பக வரம்புகள் பொருந்தலாம்.

கேச் ஏபிஐ-ஐ எப்போது பயன்படுத்த வேண்டும்

கேச் ஏபிஐ இதற்கு ஏற்றது:

• நிலையான சொத்துக்களை கேச் செய்தல்: CSS கோப்புகள், ஜாவாஸ்கிரிப்ட் கோப்புகள், படங்கள், எழுத்துருக்கள்.
• ஆஃப்லைன் அனுபவங்களை உருவாக்குதல்: இணைய இணைப்பு இல்லாவிட்டாலும் உள்ளடக்கத்தை அணுக பயனர்களை அனுமதித்தல்.
• செயல்திறனை மேம்படுத்துதல்: நெட்வொர்க் கோரிக்கைகளைக் குறைத்து ஏற்றுதல் நேரங்களை மேம்படுத்துதல்.

எடுத்துக்காட்டு: ஆஃப்லைன் அணுகலுக்காக படங்களை கேச் செய்தல்

இந்த எடுத்துக்காட்டு ஆஃப்லைன் அணுகலுக்காக கேச் ஏபிஐ-ஐப் பயன்படுத்தி படங்களை எவ்வாறு கேச் செய்வது என்பதைக் காட்டுகிறது:

            
// ... (Service Worker setup) ...

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('my-image-cache').then(cache => {
      return cache.addAll([
        '/images/image1.jpg',
        '/images/image2.png',
        '/images/image3.gif'
      ]);
    })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

            

              
                Copy
              
            
          

சரியான சேமிப்பக விருப்பத்தைத் தேர்ந்தெடுப்பது

பொருத்தமான உலாவி சேமிப்பக விருப்பத்தைத் தேர்ந்தெடுப்பது பல காரணிகளைப் பொறுத்தது:

• தரவு அளவு: சிறிய அளவிலான தரவுகளுக்கு (4KB-க்கும் குறைவாக), குக்கீகள் போதுமானதாக இருக்கலாம். பெரிய அளவிலான தரவுகளுக்கு, லோக்கல் ஸ்டோரேஜ், செஷன் ஸ்டோரேஜ் அல்லது IndexedDB சிறந்த தேர்வுகள்.
• தரவு ஆயுட்காலம்: தரவு அமர்வுகளுக்கு இடையில் நிலையானதாக இருக்க வேண்டும் என்றால், லோக்கல் ஸ்டோரேஜ் அல்லது IndexedDB-ஐப் பயன்படுத்தவும். தற்போதைய அமர்வுக்கு மட்டுமே தரவு தேவைப்பட்டால், செஷன் ஸ்டோரேஜைப் பயன்படுத்தவும். குக்கீகள் expires பண்பைப் பொறுத்து நிலையானதாகவோ அல்லது அமர்வு அடிப்படையிலானதாகவோ இருக்கலாம்.
• தரவு உணர்திறன்: கடவுச்சொற்கள் போன்ற உணர்திறன் வாய்ந்த தரவை உலாவி சேமிப்பகத்தில் சேமிப்பதைத் தவிர்க்கவும். நீங்கள் உணர்திறன் வாய்ந்த தரவை சேமிக்க வேண்டும் என்றால், முதலில் அதை குறியாக்கம் செய்யவும்.
• செயல்திறன் தேவைகள்: சிக்கலான தரவு மேலாண்மை காட்சிகள் அல்லது பெரிய தரவுத்தொகுப்புகளுக்கு, IndexedDB சிறந்த செயல்திறனை வழங்குகிறது. HTTP கோரிக்கைகள் மற்றும் பதில்களை கேச் செய்ய, கேச் ஏபிஐ சிறந்த விருப்பமாகும்.
• சிக்கலான தன்மை: லோக்கல் ஸ்டோரேஜ் மற்றும் செஷன் ஸ்டோரேஜ் பயன்படுத்த எளிதானவை. குக்கீகள் மற்றும் கேச் ஏபிஐ சற்றே சிக்கலானவை. IndexedDB மிகவும் சிக்கலான ஏபிஐ-ஐக் கொண்டுள்ளது.
• ஆஃப்லைன் தேவைகள்: ஆஃப்லைன் செயல்பாட்டை இயக்குவதற்கு கேச் ஏபிஐ மற்றும் IndexedDB சிறந்த விருப்பங்கள்.

ஒவ்வொரு சேமிப்பக விருப்பத்தின் முக்கிய பண்புகளை சுருக்கமாகக் காட்டும் ஒரு அட்டவணை இதோ:

பாதுகாப்பு பரிசீலனைகள்

உலாவி சேமிப்பகத்தைப் பயன்படுத்தும்போது, பாதுகாப்பு சிறந்த நடைமுறைகளைக் கருத்தில் கொள்வது அவசியம்:

• உணர்திறன் வாய்ந்த தரவைச் சேமிப்பதைத் தவிர்க்கவும்: கடவுச்சொற்கள், கிரெடிட் கார்டு எண்கள் அல்லது சமூகப் பாதுகாப்பு எண்கள் போன்ற உணர்திறன் வாய்ந்த தரவை சரியான குறியாக்கம் இல்லாமல் உலாவி சேமிப்பகத்தில் ஒருபோதும் சேமிக்க வேண்டாம்.
• HTTPS-ஐப் பயன்படுத்தவும்: போக்குவரத்தில் உள்ள தரவைப் பாதுகாக்க உங்கள் வலைத்தளத்தை எப்போதும் HTTPS வழியாக வழங்கவும்.
• தரவைத் தூய்மைப்படுத்தவும்: XSS தாக்குதல்களைத் தடுக்க தரவைச் சேமிப்பதற்கு முன் அதைத் தூய்மைப்படுத்தவும்.
• குக்கீகளுக்கு HttpOnly மற்றும் Secure பண்புகளை அமைக்கவும்: இந்த பண்புகள் XSS மற்றும் CSRF தாக்குதல்களைத் தணிக்க உதவும்.
• உள்ளீட்டு சரிபார்ப்பைச் செயல்படுத்தவும்: தீங்கிழைக்கும் தரவு சேமிக்கப்படுவதைத் தடுக்க பயனர் உள்ளீட்டைச் சரிபார்க்கவும்.
• உங்கள் குறியீட்டைத் தவறாமல் மதிப்பாய்வு செய்து புதுப்பிக்கவும்: சமீபத்திய பாதுகாப்பு சிறந்த நடைமுறைகளுடன் புதுப்பித்த நிலையில் இருங்கள் மற்றும் அவற்றை உங்கள் குறியீட்டில் பயன்படுத்தவும்.

முடிவுரை

ஜாவாஸ்கிரிப்ட் பல உலாவி சேமிப்பக விருப்பங்களை வழங்குகிறது, ஒவ்வொன்றும் அதன் தனித்துவமான பலம் மற்றும் பலவீனங்களைக் கொண்டுள்ளன. குக்கீகள், லோக்கல் ஸ்டோரேஜ், செஷன் ஸ்டோரேஜ், IndexedDB மற்றும் கேச் ஏபிஐ ஆகியவற்றின் பண்புகளைப் புரிந்துகொள்வதன் மூலம், உங்கள் குறிப்பிட்ட தேவைகளுக்கு மிகவும் பொருத்தமான உத்தியைத் தேர்வுசெய்யலாம். உங்கள் உலகளாவிய பார்வையாளர்களுக்காக ஒரு வலுவான மற்றும் பயனர் நட்பு அனுபவத்தை உருவாக்க உங்கள் வலைப் பயன்பாடுகளில் தரவு நிலைத்தன்மையைச் செயல்படுத்தும்போது பாதுகாப்பு மற்றும் செயல்திறனுக்கு முன்னுரிமை அளிக்க நினைவில் கொள்ளுங்கள்.

திறமையான உலாவி சேமிப்பக மேலாண்மை ஒரு தொடர்ச்சியான செயல்முறையாகும். உங்கள் சேமிப்பக உத்திகள் உங்கள் பயன்பாட்டின் வளர்ந்து வரும் தேவைகள் மற்றும் சமீபத்திய சிறந்த நடைமுறைகளுடன் ஒத்துப்போவதை உறுதிசெய்ய அவற்றை தொடர்ந்து மதிப்பீடு செய்யுங்கள்.