LocalStorage در JavaScript

مقدمه

بستن تصادفی یک صفحه وب در حین پر کردن فرم ممکن است خشمگین باشد. شما تمام داده های پر شده را از دست می دهید و باید دوباره شروع کنید. در این مقاله، نحوه استفاده از localStorage در جاوا اسکریپت را برای ذخیره داده های خود فراتر از یک جلسه مرور خواهید آموخت. ما نحوه استفاده از این مکانیسم و ​​ویژگی Window.localStorage را به شما نشان خواهیم داد و اصول ذخیره سازی وب را در جاوا اسکریپت مرور خواهیم کرد.

LocalStorage در جاوا اسکریپت چیست؟

localStorage یک ویژگی است که به سایت ها و برنامه های جاوا اسکریپت اجازه می دهد جفت های کلید-مقدار را در یک مرورگر وب بدون تاریخ انقضا ذخیره کنند. این به این معنی است که داده های ذخیره شده حتی پس از بستن مرورگر یا راه اندازی مجدد رایانه توسط کاربر باقی می مانند.

localStorage یک ویژگی شی پنجره است که آن را به یک شی جهانی تبدیل می کند که می تواند با پنجره مرورگر تعامل داشته باشد و آن را دستکاری کند. همچنین می توان از آن در ترکیب با سایر ویژگی ها و روش های پنجره استفاده کرد.

Window.localStorage چیست؟

مکانیسم localStorage از طریق ویژگی Window.localStorage در دسترس است. Window.localStorage بخشی از رابط Window در جاوا اسکریپت است که نمایانگر یک پنجره حاوی یک سند DOM است.

رابط Window دارای طیف گسترده ای از توابع، سازنده ها، اشیاء و فضاهای نام است. Window.localStorage یک ویژگی فقط خواندنی است که مرجعی را به شی ذخیره‌سازی محلی مورد استفاده برای ذخیره داده‌ها برمی‌گرداند که فقط برای منبعی که آن را ایجاد کرده است قابل دسترسی است.

زمان استفاده از localStorage

به زبان ساده، localStorage برای ذخیره و بازیابی داده ها استفاده می شود. در حالی که می توانید مقادیر کمی داده را با localStorage ذخیره کنید، برای مجموعه داده های بزرگ مناسب نیست. localStorage برای هر کسی که از دستگاه استفاده می کند قابل دسترسی است، بنابراین شما نباید از آن برای ذخیره اطلاعات حساس استفاده کنید. می توانید از آن برای ذخیره تنظیمات برگزیده کاربر مانند زبان یا موضوع استفاده کنید. همچنین در صورت استفاده مکرر از آن می توانید برای کش کردن داده ها استفاده کنید. localStorage می‌تواند داده‌های فرم را ذخیره کند که اگر کاربر مرورگر را ببندد از بین نخواهند رفت.

اگر برنامه‌ای دارید که از شما می‌خواهد وارد شوید، از localStorage می‌توان برای حفظ داده‌های جلسه استفاده کرد. حتی پس از بستن و باز کردن مجدد مرورگر نیز می توانید وارد سیستم شوید. ما این را بعداً در این آموزش با استفاده از یک برنامه ساده برای انجام کار نشان خواهیم داد.

localStorage کجا ذخیره می شود؟

در Google Chrome، داده های ذخیره سازی وب در یک فایل SQLite در زیرپوشه ای در نمایه کاربر ذخیره می شود. زیرپوشه در \AppData\Local\Google\Chrome\User Data\Default\Local Storage در ماشین‌های Windows و ~/Library/Application Support/Google/Chrome/Default/Local Storage در macOS قرار دارد. فایرفاکس اشیاء ذخیره سازی را در یک فایل SQLite به نام webappsstore.sqlite ذخیره می کند که در پوشه پروفایل کاربر نیز قرار دارد.

آشنایی با Web Storage API

localStorage یکی از دو مکانیسم Web Storage API است و دیگری sessionStorage است. Web Storage API مجموعه ای از مکانیسم هایی است که مرورگرها را قادر می سازد جفت های کلید-مقدار را ذخیره کنند. این طراحی شده است که بسیار شهودی تر از استفاده از کوکی ها باشد.

جفت‌های کلید-مقدار اشیاء ذخیره‌سازی را نشان می‌دهند که شبیه به اشیا هستند، با این تفاوت که در طول بارگذاری صفحه دست نخورده باقی می‌مانند و همیشه رشته‌ای هستند. شما می توانید مانند یک شی یا با استفاده از متد getItem() به این مقادیر دسترسی داشته باشید (در ادامه در مورد آن بیشتر توضیح خواهیم داد).

sessionStorage در مقابل localStorage

هر دو sessionStorage و localStorage یک فضای ذخیره سازی جداگانه برای هر منبع موجود در طول مدت جلسه صفحه دارند. تفاوت اصلی بین آنها این است که sessionStorage فقط یک منطقه ذخیره سازی را حفظ می کند. در همان زمان، مرورگر باز است (از جمله زمانی که صفحه مجدداً بارگیری یا بازیابی می شود) در حالی که localStorage پس از بسته شدن مرورگر به ذخیره داده ها ادامه می دهد.

localStorage داده هایی را ذخیره می کند که منقضی نمی شوند، در حالی که sessionStorage فقط داده ها را برای یک جلسه ذخیره می کند. توجه به این نکته مهم است که داده‌های محلی ذخیره‌سازی بارگیری شده در یک جلسه مرور ناشناس پس از بسته شدن آخرین برگه خصوصی پاک می‌شوند. روش setItem SessionStorage زمانی مفید است که به ذخیره سازی موقت داده نیاز است، و باید در شرایطی استفاده شود که ماندگاری داده بیش از جلسه فعلی مورد نیاز نیست.

معمولا sessionStorage در مقایسه با localStorage محدودیت ذخیره سازی کمتری دارد که اغلب به چند مگابایت در هر منبع محدود می شود. این باعث می شود که برای ذخیره داده های موقت در طول جلسه کاربر بدون مصرف بیش از حد منابع مرورگر مناسب باشد.

از طرف دیگر، LocalStorage ظرفیت ذخیره سازی بزرگتری را فراهم می کند که اغلب از 5 تا 10 مگابایت در هر مبدا متغیر است. برای ذخیره مقادیر بیشتری از داده ها که باید در چندین جلسه باقی بمانند، مناسب است.

مزایا و معایب LocalStorage

localStorage در جاوا اسکریپت یک ابزار مهم برای ذخیره داده های سمت مشتری است. با این حال، چندین مزایا و معایب دارد که باید در نظر بگیرید.

مزایا

اولین مزیت LocalStorage مزیتی است که قبلاً چند بار به آن اشاره کرده ایم و آن این است که داده های ذخیره شده منقضی نمی شوند. همچنان می‌توانید به داده‌ها به‌صورت آفلاین دسترسی داشته باشید، و localStorage داده‌هایی را ذخیره می‌کند که می‌توانند بدون اتصال به اینترنت استفاده شوند.

ذخیره سازی داده ها با localStorage امن تر از ذخیره با کوکی است و شما کنترل بیشتری بر داده های خود دارید. در نهایت، localStorage ظرفیت ذخیره سازی بیشتری در مقایسه با کوکی ها دارد. در حالی که کوکی ها فقط می توانند چهار کیلوبایت داده را ذخیره کنند، LocalStorage می تواند تا پنج مگابایت داده را ذخیره کند.

معایب

localStorage همزمان است، به این معنی که هر عملیات فقط یکی پس از دیگری اجرا می شود. این حداقل مشکلات را برای مجموعه داده های کوچکتر ایجاد می کند، اما با افزایش داده های شما، این موضوع می تواند به یک مشکل بزرگ تبدیل شود.

اگرچه LocalStorage از کوکی ها ایمن تر است، اما هنوز نباید از آن برای ذخیره داده های حساس استفاده کنید. هر کسی که به دستگاه کاربر دسترسی داشته باشد می تواند به داده های ذخیره شده با localStorage دسترسی داشته باشد. علاوه بر این، localStorage فقط می‌تواند رشته‌ها را ذخیره کند، بنابراین اگر می‌خواهید انواع داده‌های دیگر را ذخیره کنید، باید آنها را به رشته تبدیل کنید. و در نهایت، ذخیره داده های بیش از حد با localStorage می تواند برنامه شما را کند کند.

LocalStorage چگونه کار می کند؟

تاکنون بارها آن را شنیده اید – localStorage داده ها را ذخیره می کند. و اگر داده‌ها را ذخیره می‌کنید، به این معنی است که ممکن است بعداً نیاز به بازیابی آن داشته باشید. در این بخش، دقیقاً نحوه عملکرد localStorage را بررسی خواهیم کرد. در اینجا خلاصه ای از نحوه عملکرد آن آمده است:

• setItem(): کلید و مقدار را به localStorage اضافه می کند
• getItem(): موارد را از localStorage بازیابی/دریافت می کند
• removeItem(): یک مورد را از localStorage حذف می کند
• clear(): تمام داده ها را از localStorage پاک می کند
• key(): عددی را برای بازیابی کلید محلی ذخیره می کند

ذخیره داده ها با setItem()

متد setItem() به شما امکان می دهد مقادیر را در localStorage ذخیره کنید. دو پارامتر نیاز دارد: یک کلید و یک مقدار. کلید را می توان بعداً برای واکشی مقدار متصل به آن ارجاع داد. در اینجا چگونه باید به نظر برسد:

localStorage.setItem('name', 'Obaseki Nosa');

در کد بالا می بینید که نام کلید و Obaseki Nosa مقدار است. همانطور که قبلاً اشاره کردیم، localStorage فقط می تواند رشته ها را ذخیره کند. برای ذخیره آرایه ها یا اشیاء در localStorage، باید آنها را به رشته تبدیل کنید.

برای انجام این کار، قبل از ارسال به setItem() از متد JSON.stringify استفاده می کنیم، مانند:

const userArray = ["Obaseki",25]
localStorage.setItem('user', JSON.stringify(userArray));

بازیابی اطلاعات با getItem()

getItem() به شما امکان می دهد به داده های ذخیره شده در شیء localStorage مرورگر دسترسی داشته باشید. این متد تنها یک پارامتر یعنی کلید را می پذیرد و مقدار را به صورت رشته برمی گرداند:

localStorage.getItem('name');

این یک رشته با مقدار “Obaseki Nosa” را برمی گرداند. اگر کلید مشخص شده در localStorage وجود نداشته باشد، null برمی‌گرداند. در مورد آرایه، از متد JSON.parse() استفاده می کنیم که رشته JSON را به یک شی جاوا اسکریپت تبدیل می کند:

JSON.parse(localStorage.getItem('user'));

با استفاده از آرایه ای که در بالا ایجاد کردیم، در اینجا نحوه بازیابی آن از localStorage آمده است:

const userData = JSON.parse(localStorage.getItem('user'));
console.log(userData);

این روش آرایه را برمی گرداند [“Obaseki”، 25]. می توانید صفحه وب را بررسی کرده و آن را در کنسول پیدا کنید، مانند این:

این تصویر از فایرفاکس است، بنابراین در مرورگرهای دیگر کمی متفاوت به نظر می رسد. بیایید آن را با آرایه دیگری که با localStorage ذخیره نشده است مقایسه کنیم:

const userArray2 = ["Oscar", 27];
console.log(userArray2);

اکنون، مانند شکل زیر، دو آرایه در کنسول داریم:

به طور معمول، اگر آنها را در ویرایشگر کد خود نظر دهید، باید از کنسول ناپدید شوند. اما هر چیزی که با localStorage ذخیره شود باقی خواهد ماند. در اینجا یک مثال است:

حذف داده ها با removeItem()

برای حذف یک مورد از localStorage، از متد removeItem() استفاده خواهید کرد. هنگام ارسال نام کلید، متد removeItem() کلید موجود را از حافظه حذف می کند. اگر هیچ موردی با کلید داده شده مرتبط نباشد، این روش هیچ کاری انجام نمی دهد. این کد است:

.localStorage.removeItem('name');

نحوه حذف همه موارد در localStorage: clear()

برای حذف همه موارد در localStorage، از متد clear() استفاده می کنید. این روش، زمانی که فراخوانی می شود، کل فضای ذخیره سازی تمام رکوردهای آن دامنه را پاک می کند. هیچ پارامتری را دریافت نمی کند. از کد زیر استفاده کنید:

localStorage.clear();

چگونه نام یک کلید را بدست آوریم: key()

متد ()key زمانی به کار می‌آید که نیاز به حلقه زدن کلیدها دارید اما همچنان بتوانید یک عدد یا فهرست را به localStorage ارسال کنید تا نام کلید را بازیابی کنید. در اینجا به نظر می رسد:

localStorage.key(index);

پارامتر index نشان دهنده شاخص صفر کلیدی است که می خواهید نام آن را بازیابی کنید.

localStorage در مقابل کوکی ها

هم LocalStorage و هم کوکی ها برای ذخیره داده های سمت سرویس گیرنده استفاده می شوند. همانطور که قبلاً اشاره کردیم، کوکی‌ها تنها می‌توانند حداکثر چهار کیلوبایت داده را ذخیره کنند، که به طور قابل توجهی کمتر از ظرفیت ذخیره‌سازی پنج مگابایتی LocalStorage است.

کوکی ها با هر درخواست HTTP به طور خودکار به سرور ارسال می شوند، اما localStorage در دستگاه کاربر محلی می ماند. این می تواند عملکرد وب را بهبود بخشد و ترافیک شبکه را افزایش نمی دهد زیرا داده ها را با سرور به اشتراک نمی گذارد.

همانطور که دیدیم، داده‌هایی که با localStorage ذخیره می‌کنید منقضی نمی‌شوند. تا زمانی که آن را به صورت دستی حذف نکنید، به طور نامحدود باقی می ماند. از طرف دیگر، کوکی ها را می توان تنظیم کرد که پس از مدتی یا به محض بستن مرورگر منقضی شوند. کوکی‌ها معمولا داده‌هایی مانند تنظیمات برگزیده کاربر و اطلاعات ورود/احراز هویت را ذخیره می‌کنند. این داده ها در تمام برگه ها و پنجره های مرورگر قابل دسترسی است. با این حال، localStorage فقط داده هایی را ذخیره می کند که در یک پروتکل یا دامنه خاص قابل دسترسی هستند.

پشتیبانی از مرورگر localStorage

localStorage، به عنوان یک نوع ذخیره سازی وب، یک مشخصات HTML5 است. توسط مرورگرهای اصلی از جمله Internet Explorer v8 پشتیبانی می شود. می‌توانید از قطعه زیر برای بررسی اینکه آیا مرورگر از localStorage پشتیبانی می‌کند یا خیر استفاده کنید:

if (typeof(Storage) !== "undefined") {
// Code for localStorage
} else {
// No web storage Support.
}

تکنیک های پیشرفته برای مدیریت داده ها در localStorage

اکنون، چند تکنیک پیشرفته برای مدیریت داده‌ها در محل ذخیره‌سازی محلی را بررسی می‌کنیم. ما روی نحوه حذف موثر کلیدها، به کارگیری بهترین شیوه ها برای ذخیره و تنظیم اشیاء، و استفاده از تجزیه و رشته سازی JSON برای داده های پیچیده کار خواهیم کرد.

حذف موثر کلید

حذف موثر کلیدها از اشیاء ذخیره شده در localStorage برای بهینه سازی فضای ذخیره سازی ضروری است، به خصوص اگر در حال ساخت برنامه ای هستید که در آن داده ها اغلب به روز یا حذف می شوند. حذف کلیدهای غیر ضروری به جلوگیری از خوشه‌بندی LocalStorage با داده‌های بی‌فایده کمک می‌کند.

برای حذف موثر یک کلید از یک شی در localStorage، می‌توانید شی را با استفاده از کلید بازیابی کنید، ویژگی مورد نظر را حذف کنید و سپس شی به‌روز شده را به localStorage برگردانید. این کار دستکاری داده های غیر ضروری و سربار ذخیره سازی را به حداقل می رساند:

// Example of efficient key removal
let storedData = JSON.parse(localStorage.getItem('key'));
delete storedData.propertyToRemove;
localStorage.setItem('key', JSON.stringify(storedData));

ذخیره و تنظیم اشیاء

تجزیه JSON و رشته‌بندی تکنیک‌های قدرتمندی برای مدیریت ساختارهای داده پیچیده در هنگام ذخیره‌سازی و بازیابی داده‌ها در localStorage هستند. آنها امکان تبدیل آسان بین اشیاء جاوا اسکریپت و رشته های JSON را فراهم می کنند و مدیریت و دستکاری کارآمد داده ها را ممکن می سازند.

هنگام ذخیره سازی ساختارهای داده پیچیده مانند اشیاء یا آرایه ها در localStorage، ضروری است که آنها را با استفاده از JSON.stringify() قبل از تنظیم آنها در localStorage، رشته بندی کنید. این شیء جاوا اسکریپت را به یک رشته JSON تبدیل می کند، که سپس می تواند به عنوان یک جفت کلید-مقدار ذخیره شود:

// Storing an object in LocalStorage
let dataObject = { key: 'value' };
localStorage.setItem('objectKey', JSON.stringify(dataObject));
// Retrieving and parsing the object from LocalStorage
let retrievedObject = JSON.parse(localStorage.getItem('objectKey'));

هنگام برخورد با اشیاء یا آرایه های تودرتو، اطمینان حاصل کنید که تمام اشیاء تودرتو نیز برای حفظ یکپارچگی ساختار داده، رشته ای و تجزیه شده اند:

// Storing and retrieving nested objects in LocalStorage
let nestedObject = { key1: 'value1', key2: { nestedKey: 'nestedValue' } };
localStorage.setItem('nestedObject', JSON.stringify(nestedObject));
let retrievedNestedObject = JSON.parse(localStorage.getItem('nestedObject'));

نتیجه

در این مقاله، قابلیت‌های LocalStorage در جاوا اسکریپت را به عنوان راهی ساده و کارآمد برای ذخیره و بازیابی داده‌ها بدون تکیه بر کوکی‌ها بررسی کردیم. نحوه و زمان استفاده از localStorage و همچنین نحوه ذخیره، بازیابی و حذف موارد در localStorage را توضیح دادیم. از طریق مثال یک برنامه کاری، LocalStorage را در عمل نشان دادیم و آن را با کوکی ها مقایسه کردیم.

در این پست، نحوه و زمان استفاده از localStorage را یاد گرفتید. نحوه ذخیره، بازیابی و حذف موارد در localStorage را توضیح دادیم. ما همچنین یک برنامه کاری ایجاد کردیم تا ببینیم که LocalStorage چگونه در یک سناریوی عملی کار می کند. در نهایت آن را با کوکی ها مقایسه کردیم.

بنابراین، با ابزاری عالی آشنا شده‌اید که با پشتیبانی گسترده مرورگر، استفاده از آن آسان است.