HTML5 ലോക്കൽ സ്റ്റോറേജിലും സെഷൻ സ്റ്റോറേജിലും JavaScript ഒബ്‌ജക്റ്റുകൾ സംഭരിക്കുന്നു

Liam Lambert
2024, ജൂലൈ 11, വ്യാഴാഴ്‌ച 9:25:18 PM
JavaScript

വെബ് സ്റ്റോറേജിലെ ഒബ്‌ജക്‌റ്റുകൾക്കൊപ്പം പ്രവർത്തിക്കുന്നു

HTML5 ലോക്കൽ സ്റ്റോറേജ് അല്ലെങ്കിൽ സെഷൻസ്‌റ്റോറേജ് ഉപയോഗിച്ച് പ്രവർത്തിക്കുമ്പോൾ, JavaScript ഒബ്‌ജക്റ്റുകൾ സംഭരിക്കാൻ ശ്രമിക്കുമ്പോൾ ഡവലപ്പർമാർ പലപ്പോഴും പ്രശ്‌നങ്ങൾ നേരിടുന്നു. പ്രാകൃത ഡാറ്റ തരങ്ങളിൽ നിന്നും അറേകളിൽ നിന്നും വ്യത്യസ്തമായി, ഒബ്‌ജക്റ്റുകൾ സ്ട്രിംഗുകളായി പരിവർത്തനം ചെയ്യപ്പെടുന്നതായി തോന്നുന്നു, ഇത് ആശയക്കുഴപ്പത്തിനും അപ്രതീക്ഷിത ഫലത്തിനും ഇടയാക്കും.

വെബ് സ്റ്റോറേജ് ഉപയോഗിച്ച് ഒബ്‌ജക്റ്റുകൾ എങ്ങനെ ശരിയായി സംഭരിക്കാമെന്നും വീണ്ടെടുക്കാമെന്നും മനസ്സിലാക്കുന്നത് പല വെബ് ആപ്ലിക്കേഷനുകൾക്കും നിർണായകമാണ്. എന്തുകൊണ്ടാണ് ഒബ്‌ജക്‌റ്റുകൾ സ്ട്രിംഗുകളായി പരിവർത്തനം ചെയ്‌തതെന്ന് ഈ ഗൈഡ് പര്യവേക്ഷണം ചെയ്യുകയും നിങ്ങളുടെ ഒബ്‌ജക്റ്റുകൾ ശരിയായി സംഭരിക്കുകയും വീണ്ടെടുക്കുകയും ചെയ്‌തുവെന്ന് ഉറപ്പാക്കാൻ ലളിതമായ ഒരു പരിഹാരമാർഗം നൽകുകയും ചെയ്യും.

കമാൻഡ് വിവരണം
JSON.stringify() ഒരു JavaScript ഒബ്‌ജക്‌റ്റോ മൂല്യമോ JSON സ്‌ട്രിംഗിലേക്ക് പരിവർത്തനം ചെയ്യുന്നു, ഇത് ലോക്കൽ സ്റ്റോറേജിലോ സെഷൻസ്‌റ്റോറേജിലോ സംഭരണം അനുവദിക്കുന്നു.
localStorage.setItem() ലോക്കൽ സ്റ്റോറേജ് ഒബ്‌ജക്റ്റിൽ ഒരു കീ-വാല്യൂ ജോടി സംഭരിക്കുന്നു, ബ്രൗസർ സെഷനുകളിലുടനീളം ഡാറ്റ നിലനിൽക്കാൻ അനുവദിക്കുന്നു.
localStorage.getItem() ലോക്കൽ സ്റ്റോറേജിൽ നിന്ന് നൽകിയിരിക്കുന്ന കീയുമായി ബന്ധപ്പെട്ട മൂല്യം വീണ്ടെടുക്കുന്നു.
JSON.parse() ഒരു JSON സ്ട്രിംഗ് പാഴ്‌സ് ചെയ്യുകയും അതിനെ ഒരു JavaScript ഒബ്‌ജക്‌റ്റിലേക്ക് മാറ്റുകയും ചെയ്യുന്നു, ഇത് സങ്കീർണ്ണമായ ഡാറ്റാ ഘടനകൾ വീണ്ടെടുക്കാൻ പ്രാപ്‌തമാക്കുന്നു.
sessionStorage.setItem() സെഷൻസ്‌റ്റോറേജ് ഒബ്‌ജക്‌റ്റിൽ ഒരു കീ-വാല്യൂ ജോഡി സംഭരിക്കുന്നു, ഇത് പേജ് സെഷൻ്റെ ദൈർഘ്യത്തിൽ ഡാറ്റ നിലനിൽക്കാൻ അനുവദിക്കുന്നു.
sessionStorage.getItem() സെഷൻസ്‌റ്റോറേജിൽ നിന്ന് നൽകിയിരിക്കുന്ന കീയുമായി ബന്ധപ്പെട്ട മൂല്യം വീണ്ടെടുക്കുന്നു.

വെബ് സ്റ്റോറേജിൽ ഒബ്ജക്റ്റുകൾ ഫലപ്രദമായി സംഭരിക്കുകയും വീണ്ടെടുക്കുകയും ചെയ്യുന്നു

ജാവാസ്ക്രിപ്റ്റിൽ, ഒപ്പം ബ്രൗസറിൽ കീ-വാല്യൂ ജോഡികൾ സംരക്ഷിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്ന വെബ് സ്റ്റോറേജ് ഒബ്ജക്റ്റുകളാണ്. എന്നിരുന്നാലും, ഈ സ്റ്റോറേജ് സൊല്യൂഷനുകൾ സ്‌ട്രിംഗുകളെ മാത്രമേ പിന്തുണയ്‌ക്കൂ, അതായത് ഒരു JavaScript ഒബ്‌ജക്‌റ്റ് നേരിട്ട് സംഭരിക്കാൻ ശ്രമിക്കുന്നത് ഒബ്‌ജക്റ്റ് ഒരു സ്‌ട്രിംഗ് പ്രാതിനിധ്യത്തിലേക്ക് പരിവർത്തനം ചെയ്യപ്പെടുന്നതിന് കാരണമാകും എന്നാണ്. . ഒബ്‌ജക്‌റ്റുകൾ ഫലപ്രദമായി സംഭരിക്കാൻ, നിങ്ങൾ അവയെ JSON സ്‌ട്രിംഗിലേക്ക് പരിവർത്തനം ചെയ്യേണ്ടതുണ്ട് JSON.stringify(). ഈ രീതി ഒരു JavaScript ഒബ്‌ജക്റ്റ് എടുത്ത് ഒരു JSON സ്ട്രിംഗ് തിരികെ നൽകുന്നു, അത് സംഭരിക്കാൻ കഴിയും അഥവാ .

സംഭരിച്ച ഒബ്‌ജക്‌റ്റ് വീണ്ടെടുക്കുന്നതിന്, നിങ്ങൾ JSON സ്‌ട്രിംഗിനെ ഒരു JavaScript ഒബ്‌ജക്‌റ്റാക്കി മാറ്റണം . ഈ രീതി ഒരു JSON സ്ട്രിംഗ് എടുത്ത് അനുബന്ധ JavaScript ഒബ്‌ജക്റ്റ് തിരികെ നൽകുന്നു. മുകളിലെ ഉദാഹരണങ്ങളിൽ നൽകിയിരിക്കുന്ന സ്ക്രിപ്റ്റുകൾ ഈ പ്രക്രിയയെ പ്രകടമാക്കുന്നു. ആദ്യം, ഒരു ഒബ്‌ജക്‌റ്റ് സൃഷ്‌ടിക്കുകയും ഒരു JSON സ്‌ട്രിംഗിലേക്ക് പരിവർത്തനം ചെയ്യുകയും ചെയ്യുന്നു സംഭരിക്കുന്നതിന് മുമ്പ് ഉപയോഗിക്കുന്നത് localStorage.setItem(). ഒബ്‌ജക്‌റ്റ് വീണ്ടെടുക്കുന്നതിന്, JSON സ്‌ട്രിംഗിൽ നിന്ന് എടുത്തതാണ് ഉപയോഗിക്കുന്നത് തുടർന്ന് ഉപയോഗിച്ച് ഒരു JavaScript ഒബ്‌ജക്‌റ്റിലേക്ക് വീണ്ടും പാഴ്‌സ് ചെയ്‌തു .

ലോക്കൽ സ്റ്റോറേജിൽ ജാവാസ്ക്രിപ്റ്റ് ഒബ്ജക്റ്റുകൾ സംഭരിക്കുകയും വീണ്ടെടുക്കുകയും ചെയ്യുന്നു

ലോക്കൽ സ്റ്റോറേജിനായി JavaScript, JSON എന്നിവ ഉപയോഗിക്കുന്നു

// Create an object
var testObject = {'one': 1, 'two': 2, 'three': 3};

// Convert the object to a JSON string and store it in localStorage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the JSON string from localStorage and convert it back to an object
var retrievedObject = JSON.parse(localStorage.getItem('testObject'));

// Verify the type and value of the retrieved object
console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ', retrievedObject);

// Output should be:
// typeof retrievedObject: object
// Value of retrievedObject: { one: 1, two: 2, three: 3 }

സെഷൻസ്‌റ്റോറേജിൽ ജാവാസ്ക്രിപ്റ്റ് ഒബ്‌ജക്റ്റുകൾ സംഭരിക്കുകയും വീണ്ടെടുക്കുകയും ചെയ്യുന്നു

സെഷൻസ്‌റ്റോറേജിനായി JavaScript, JSON എന്നിവ ഉപയോഗിക്കുന്നു

// Create an object
var testObject = {'one': 1, 'two': 2, 'three': 3};

// Convert the object to a JSON string and store it in sessionStorage
sessionStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the JSON string from sessionStorage and convert it back to an object
var retrievedObject = JSON.parse(sessionStorage.getItem('testObject'));

// Verify the type and value of the retrieved object
console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ', retrievedObject);

// Output should be:
// typeof retrievedObject: object
// Value of retrievedObject: { one: 1, two: 2, three: 3 }

വെബ് സ്റ്റോറേജിനുള്ള നൂതന സാങ്കേതിക വിദ്യകൾ

HTML5 ഉപയോഗിക്കുമ്പോൾ ഒപ്പം , ഡെവലപ്പർമാർ പലപ്പോഴും സ്ട്രിംഗുകളേക്കാൾ കൂടുതൽ സങ്കീർണ്ണമായ ഡാറ്റ സംഭരിക്കേണ്ടതുണ്ട്. അടിസ്ഥാന വസ്തുക്കൾക്ക് JSON സീരിയലൈസേഷനും ഡിസീരിയലൈസേഷനും ഫലപ്രദമാണെങ്കിലും, കൂടുതൽ വിപുലമായ സാഹചര്യങ്ങൾക്ക് കൂടുതൽ പരിഗണനകൾ ആവശ്യമായി വന്നേക്കാം. ഉദാഹരണത്തിന്, നിങ്ങൾ ആഴത്തിൽ നെസ്റ്റഡ് ഒബ്ജക്റ്റുകളുമായോ രീതികൾ അടങ്ങിയ വസ്തുക്കളുമായോ പ്രവർത്തിക്കുകയാണെങ്കിൽ, നിങ്ങൾക്ക് കൂടുതൽ സങ്കീർണ്ണമായ ഒരു സമീപനം ആവശ്യമാണ്. പോലുള്ള ഒരു ലൈബ്രറി ഉപയോഗിക്കുന്നത് ഒരു സാധാരണ സാങ്കേതികതയാണ് അഥവാ circular-json വൃത്താകൃതിയിലുള്ള റഫറൻസുകളും കൂടുതൽ സങ്കീർണ്ണമായ ഒബ്ജക്റ്റ് ഘടനകളും കൈകാര്യം ചെയ്യാൻ.

ഈ ലൈബ്രറികൾ നിലവാരം വിപുലീകരിക്കുന്നു ഒപ്പം വൃത്താകൃതിയിലുള്ള റഫറൻസുകളുള്ള ഒബ്‌ജക്‌റ്റുകളുടെ സീരിയലൈസേഷനും ഡിസീരിയലൈസേഷനും പിന്തുണയ്‌ക്കുന്നതിനുള്ള രീതികൾ, വെബ് സ്റ്റോറേജിൽ ഒബ്‌ജക്റ്റുകൾ സംഭരിക്കുന്നതിന് കൂടുതൽ ശക്തമായ പരിഹാരം പ്രാപ്‌തമാക്കുന്നു. മറ്റൊരു പരിഗണന ഡാറ്റ കംപ്രഷൻ ആണ്. വലിയ വസ്തുക്കൾക്കായി, നിങ്ങൾക്ക് ലൈബ്രറികൾ ഉപയോഗിക്കാം ഡാറ്റ സംഭരിക്കുന്നതിന് മുമ്പ് അത് കംപ്രസ്സുചെയ്യാൻ localStorage അഥവാ , ഉപയോഗിച്ച സ്ഥലത്തിൻ്റെ അളവ് കുറയ്ക്കുന്നു. കാര്യമായ അളവിൽ ക്ലയൻ്റ് സൈഡ് ഡാറ്റ സംഭരിക്കേണ്ട ആപ്ലിക്കേഷനുകൾക്ക് ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാകും.

  1. എനിക്ക് ഫംഗ്‌ഷനുകൾ സംഭരിക്കാൻ കഴിയുമോ? അഥവാ ?
  2. ഇല്ല, വെബ് സ്റ്റോറേജിൽ ഫംഗ്‌ഷനുകൾ നേരിട്ട് സംഭരിക്കാൻ കഴിയില്ല. നിങ്ങൾക്ക് ഫംഗ്‌ഷൻ കോഡ് ഒരു സ്ട്രിംഗായി സംഭരിക്കാനും ഉപയോഗിക്കാനും കഴിയും ഇത് പുനർനിർമ്മിക്കുന്നതിന്, എന്നാൽ സുരക്ഷാ അപകടങ്ങൾ കാരണം ഇത് സാധാരണയായി ശുപാർശ ചെയ്യുന്നില്ല.
  3. ഒബ്‌ജക്‌റ്റുകളിലെ വൃത്താകൃതിയിലുള്ള അവലംബങ്ങൾ എങ്ങനെ കൈകാര്യം ചെയ്യാം?
  4. പോലുള്ള ലൈബ്രറികൾ ഉപയോഗിക്കുക അഥവാ JavaScript ഒബ്‌ജക്‌റ്റുകളിൽ വൃത്താകൃതിയിലുള്ള റഫറൻസുകൾ കൈകാര്യം ചെയ്യാൻ രൂപകൽപ്പന ചെയ്‌തിരിക്കുന്നു.
  5. എന്താണ് സംഭരണ ​​പരിധി ?
  6. സംഭരണ ​​പരിധി ഇത് സാധാരണയായി 5MB ആണ്, എന്നാൽ ഇത് ബ്രൗസറുകൾക്കിടയിൽ വ്യത്യാസപ്പെടാം.
  7. സംഭരിക്കുന്നതിന് മുമ്പ് എനിക്ക് ഡാറ്റ കംപ്രസ് ചെയ്യാൻ കഴിയുമോ?
  8. അതെ, നിങ്ങൾക്ക് ലൈബ്രറികൾ ഉപയോഗിക്കാം നിങ്ങളുടെ ഡാറ്റ സംഭരിക്കുന്നതിന് മുമ്പ് അത് കംപ്രസ്സുചെയ്യാൻ അഥവാ .
  9. ഒബ്‌ജക്‌റ്റുകളുടെ ഒരു നിര എങ്ങനെ സംഭരിക്കാനാകും?
  10. അറേയെ ഒരു JSON സ്‌ട്രിംഗിലേക്ക് പരിവർത്തനം ചെയ്യുക സംഭരിക്കുന്നതിന് മുമ്പ് അഥവാ .
  11. സെൻസിറ്റീവ് ഡാറ്റ സംഭരിക്കുന്നത് സുരക്ഷിതമാണോ? ?
  12. ഇല്ല, സെൻസിറ്റീവ് ഡാറ്റ സംഭരിക്കുന്നത് സുരക്ഷിതമല്ല കാരണം ഇത് JavaScript വഴി ആക്‌സസ് ചെയ്യാവുന്നതും സൈറ്റ് ആക്രമിക്കപ്പെട്ടാൽ വിട്ടുവീഴ്ച ചെയ്യാവുന്നതുമാണ്.
  13. എനിക്ക് ഉപയോഗിക്കാമോ വ്യത്യസ്ത ഡൊമെയ്‌നുകളിലുടനീളം?
  14. ഇല്ല, ഒരേ ഉത്ഭവത്തിലേക്ക് പരിമിതപ്പെടുത്തിയിരിക്കുന്നു, അതായത് വ്യത്യസ്ത ഡൊമെയ്‌നുകളിലുടനീളം ഇത് ആക്‌സസ് ചെയ്യാൻ കഴിയില്ല.
  15. ഉപയോക്താവ് അവരുടെ ബ്രൗസർ ഡാറ്റ മായ്‌ച്ചാൽ എന്ത് സംഭവിക്കും?
  16. എല്ലാ ഡാറ്റയും സംഭരിച്ചിരിക്കുന്നു ഒപ്പം ഉപയോക്താവ് അവരുടെ ബ്രൗസർ ഡാറ്റ മായ്‌ക്കുകയാണെങ്കിൽ നീക്കം ചെയ്യപ്പെടും.

HTML5 വെബ് സ്റ്റോറേജിൽ ഒബ്‌ജക്‌റ്റുകൾ ഫലപ്രദമായി സംഭരിക്കാനും വീണ്ടെടുക്കാനും ഒബ്‌ജക്‌റ്റുകൾ JSON സ്‌ട്രിംഗുകളിലേക്ക് പരിവർത്തനം ചെയ്യേണ്ടതുണ്ട് തുടർന്ന് അവയെ വീണ്ടും പാഴ്‌സ് ചെയ്യുന്നു . വ്യത്യസ്ത ബ്രൗസർ സെഷനുകളിലുടനീളം ഡാറ്റ കേടുകൂടാതെയിരിക്കുമെന്നും ഉപയോഗയോഗ്യമാണെന്നും ഈ രീതി ഉറപ്പാക്കുന്നു. ഈ ടെക്‌നിക്കുകൾ മനസിലാക്കുകയും ഉപയോഗിക്കുകയും ചെയ്യുന്നതിലൂടെ, ഡെവലപ്പർമാർക്ക് അവരുടെ വെബ് ആപ്ലിക്കേഷനുകളുടെ പ്രവർത്തനക്ഷമതയും പ്രകടനവും വർദ്ധിപ്പിക്കുന്നതിന് കൂടുതൽ സങ്കീർണ്ണമായ ഡാറ്റ മാനേജ്‌മെൻ്റ് ടാസ്‌ക്കുകൾക്കായി ലോക്കൽ സ്റ്റോറേജും സെഷൻ സ്റ്റോറേജും പ്രയോജനപ്പെടുത്താൻ കഴിയും.