از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
ذخیره اشیاء در localStorage/sessionStorage به عنوان یک توسعه دهنده وب، احتمالاً با نیاز به ماندگاری داده ها در جلسات مختلف یا حتی برگه ها در مرورگر مواجه شده اید. اینجا جایی است که LocalStorage و sessionStorage HTML5 مفید هستند. این دو شی ذخیره سازی وب به شما امکان می دهند داده ها را مستقیماً در مرورگر کاربر ذخیره کنید، بدون نیاز به کد سمت سرور …
سرفصلهای مطلب
معرفی
به‌عنوان یک توسعه‌دهنده وب، احتمالاً با نیاز به ماندگاری داده‌ها در جلسات مختلف یا حتی برگه‌ها در مرورگر مواجه شده‌اید. اینجا جایی است که LocalStorage و sessionStorage HTML5 مفید هستند. این دو شی ذخیره سازی وب به شما امکان می دهند داده ها را مستقیماً در مرورگر کاربر ذخیره کنید، بدون نیاز به کد سمت سرور.
در این مقاله، نگاهی خواهیم داشت به این که این اشیاء ذخیره سازی چیست و چگونه می توانید از آنها برای ذخیره اشیاء جاوا اسکریپت خود استفاده کنید.
localStorage/sessionStorage چیست؟
localStorage و sessionStorage بخشی از Web Storage API هستند که راه‌های ثابتی را برای مرورگرها برای ذخیره جفت‌های کلید/مقدار فراهم می‌کند. این جفت ها در یک مرورگر وب بدون تاریخ انقضا در مورد LocalStorage و برای مدت زمان نگهداری می شوند. page جلسه در صورت sessionStorage.
در اینجا یک راه ساده برای فکر کردن در مورد آن وجود دارد:
localStorageمانند جعبه ای در گاراژ شماست که در آن چیزهایی را که ممکن است بعداً به آن نیاز داشته باشید در آن نگهداری می کنید. فقط همیشه آنجاست. در طول جلسات مختلف و حتی اگر مرورگر خود را ببندید و دوباره باز کنید، ادامه می یابد.sessionStorage، روی از سوی دیگر، مانند کوله‌پشتی است که در اطراف خود حمل می‌کنید. این فقط تا زمانی که “سفر” شما (یا به عبارت وب، جلسه شما) طول می کشد. اگر برگه یا مرورگر را ببندید، داده ها ناپدید می شوند.
در اینجا یک مثال اساسی از روش استفاده از آنها آورده شده است:
// Storing data
localStorage.setItem('key', 'value');
sessionStorage.setItem('key', 'value');
// Retrieving data
let localValue = localStorage.getItem('key');
let sessionValue = sessionStorage.getItem('key');
توجه داشته باشید: هم localStorage و هم sessionStorage محدود به ذخیره سازی هستند فقط داده های رشته ای. بنابراین، اگر می خواهید اشیا را ذخیره کنید، باید آنها را با استفاده از رشته ها تبدیل کنید JSON.stringify(). در بخش های بعدی به این موضوع خواهیم پرداخت.
در حالی که این اشیاء ذخیره‌سازی فوق‌العاده مفید هستند، نباید برای داده‌های حساس مانند رمز عبور یا اطلاعات کارت اعتباری استفاده شوند، زیرا داده‌ها رمزگذاری نشده‌اند و با هر اسکریپتی قابل دسترسی هستند. روی سایت شما.
روش ذخیره اشیاء در localStorage
اکنون که درک بهتری از چیستی داریم localStorage است، بیایید به روش انجام آن نگاه کنیم. همانطور که قبلا ذکر شد، localStorage فقط می تواند رشته ها را ذخیره کند. بنابراین، ما باید قبل از ذخیره شی، آن را به رشته تبدیل کنیم.
در اینجا مثالی از روش انجام این کار آورده شده است:
let user = {
name: 'John Doe',
email: '(email protected)'
};
// Convert the user object into a string using JSON.stringify
let userString = JSON.stringify(user);
// Store the stringified user object in localStorage
localStorage.setItem('user', userString);
در این کد ابتدا a را ایجاد می کنیم user شی با name و email خواص سپس این شی را با استفاده از عبارت به یک رشته تبدیل می کنیم JSON.stringify روش. این متد یک شی را می گیرد و یک نمایش رشته ای از آن شی را برمی گرداند.
در نهایت، ما شیء رشته ای را در آن ذخیره می کنیم localStorage با استفاده از setItem روش. این روش دو آرگومان دارد: کلید ذخیره داده ها در زیر و خود داده.
اکنون، اگر ابزارهای توسعه دهنده مرورگر خود را باز کنید و به تب Application بروید، باید داده های ذخیره شده خود را در بخش localStorage مشاهده کنید.
توجه داشته باشید: را JSON.stringify این روش همچنین می تواند برای تبدیل آرایه ها و سایر انواع داده های پیچیده به فرمت رشته ای استفاده شود. این آن را به ابزاری همه کاره برای ذخیره سازی طیف گسترده ای از داده ها تبدیل می کند localStorage.
روش ذخیره اشیاء در sessionStorage
دقیقاً مانند localStorage، sessionStorage نیز توانایی ذخیره جفت های کلید-مقدار را فراهم می کند. با این حال، یک تفاوت اساسی بین این دو وجود دارد: sessionStorage داده ها را تنها تا زمانی که جلسه فعال است – یعنی تا زمانی که کاربر برگه یا مرورگر را ببندد، حفظ می کند. این می تواند برای ذخیره داده های موقت مانند ورودی های فرم، یا سایر اطلاعات مربوط به جلسه مفید باشد.
بیایید ببینیم چگونه می توانیم اشیاء را در sessionStorage ذخیره کنیم. درست مانند localStorage، ما نمی توانیم مستقیماً اشیاء را همانطور که هستند ذخیره کنیم. ابتدا باید آنها را با استفاده از یک رشته تبدیل کنیم JSON.stringify(). در اینجا یک مثال است:
let user = {
name: 'John Doe',
age: 25,
email: '(email protected)'
};
// Convert the user object into a string
let userString = JSON.stringify(user);
// Store the stringified object in sessionStorage
sessionStorage.setItem('user', userString);
در مثال بالا ابتدا یک شی را تعریف می کنیم user با برخی خواص سپس این شی را با استفاده از یک رشته به رشته تبدیل می کنیم JSON.stringify()و با استفاده از sessionStorage آن را ذخیره کنید sessionStorage.setItem().
بازیابی اشیاء ذخیره شده از localStorage/sessionStorage
اکنون که اشیاء خود را در localStorage یا sessionStorage ذخیره کرده‌ایم، احتمالاً می‌خواهیم آنها را در نقطه‌ای بازیابی کنیم. را process زیرا این نسبتاً ساده است، اما به چند مرحله نیاز دارد زیرا ما اشیاء خود را به عنوان رشته ذخیره کرده ایم.
در اینجا روش بازیابی ما آمده است user شیء از sessionStorage:
// Get the stringified object from sessionStorage
let userString = sessionStorage.getItem('user');
// Parse the string back into an object
let user = JSON.parse(userString);
console.log(user);
وقتی این کد را اجرا می کنیم، نسخه اصلی خود را خواهیم دید user شی وارد شده به console:
{
name: 'John Doe',
age: 25,
email: '(email protected)'
}
را process برای بازیابی اشیاء از localStorage یکسان است، فقط جایگزین کنید sessionStorage با localStorage.
توجه داشته باشید: اطمینان حاصل کنید که همیشه استفاده کنید JSON.parse() هنگام بازیابی اشیا از localStorage یا sessionStorage. اگر فراموش کردید این کار را انجام دهید، به جای خود شی، با یک نمایش رشته ای از شی خود کار خواهید کرد.
نتیجه
در این مقاله، ما اصول اولیه روش ذخیره، بازیابی و کار با اشیاء را در localStorage و sessionStorage HTML5 پوشش داده ایم. ما دیده‌ایم که چگونه این مکانیسم‌های ذخیره‌سازی وب می‌توانند روشی ساده و مؤثر برای ماندگاری داده‌ها در جلسات مرورگر ارائه دهند، همگی در عین حفظ سطح بالایی از عملکرد و امنیت.
یکی از موارد استفاده رایج برای localStorage و sessionStorage ذخیره تنظیمات برگزیده کاربر است. به عنوان مثال، اگر کاربری یک تم تیره را برای وب سایت شما ترجیح می دهد، می توانید این اولویت را در localStorage ذخیره کنید و هر بار که کاربر بازدید می کند، آن را اعمال کنید.
در اینجا خلاصه ای سریع از آنچه پوشش دادیم آورده شده است:
- localStorage و sessionStorage مکانیسم های ذخیره سازی وب هستند که توسط HTML5 ارائه شده اند.
- localStorage داده‌ها را در تمام جلسات حفظ می‌کند، در حالی که sessionStorage فقط داده‌ها را برای مدت جلسه جاری حفظ می‌کند.
- شما می توانید اشیاء را در localStorage یا sessionStorage با تبدیل آنها به فرمت رشته ای ذخیره کنید
JSON.stringify(). - می توانید با تجزیه رشته ذخیره شده به یک شیء، اشیاء را از localStorage یا sessionStorage بازیابی کنید.
JSON.parse().
منتشر شده در 1402-12-29 11:56:04
