اندروید. سیستم عامل. چند رسانه ای. رسانه های اجتماعی ابزار. کدک ها گرافیک
شما اینجایید: » »

نحوه پاک کردن حافظه محلی html5 نمای کلی ذخیره سازی سمت مشتری

ذخیره سازی داده ها به طور مستقیم در مرورگر مزایای بسیاری دارد که اصلی ترین آنها دسترسی سریع و مستقل از شبکه به "پایگاه داده" است. در این لحظه 4 روش فعال برای این کار وجود دارد (به علاوه یک روش منسوخ شده):

  1. ذخیره سازی محلی
  2. ذخیره سازی جلسه
  3. IndexedDB
  4. WebSQL (منسوخ شده)

کلوچه ها

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

علاوه بر این، کوکی ها را می توان برای ذخیره سازی داده های ساده در سمت مشتری استفاده کرد. بنابراین، اغلب برای ذخیره داده های عمومی مانند تنظیمات کاربر نیز استفاده می شود.

کوکی های اولیه CRUD

// ایجاد document.cookie = "user_name=Ire Aderinokun"; document.cookie = "user_age=25;max-age=31536000;secure"; // خواندن (همه) console.log(document.cookie); // به روز رسانی document.cookie = "user_age=24;max-age=31536000;secure"; // حذف document.cookie = "user_name=Ire Aderinokun;expires=Thu, 01 Jan 1970 00:00:01 GMT";

مزایای کوکی

  • می توان از آنها برای ارتباط با سرور استفاده کرد
  • می‌توانیم کوکی‌ها را به‌جای حذف دستی تنظیم کنیم که به‌طور خودکار منقضی شوند.

معایب کوکی ها

  • آنها به بارگذاری صفحه سند اضافه می شوند.
  • آنها می توانند مقدار کمی از داده ها را ذخیره کنند
  • آنها فقط می توانند شامل رشته ها باشند.
  • مسائل امنیتی بالقوه
  • این روش از زمان ظهور Web Storage API (ذخیره سازی محلی و جلسه) برای ذخیره سازی سمت سرویس گیرنده منسوخ شده است.

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

کوکی ها در همه مرورگرهای اصلی پشتیبانی اولیه دارند.

ذخیره سازی محلی

ذخیره‌سازی محلی نوعی از Web Storage API است، یک API ویژه برای ذخیره داده‌ها در مرورگر در قالب مقدار کلید. این API به عنوان راه حلی برای مشکلات کوکی ها ایجاد شده است و بصری تر است به روشی مطمئنذخیره سازی داده های ساده در داخل مرورگر

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

عملیات اصلی CRUD با ذخیره سازی محلی

// Create const user = ( نام: "Ire Aderinokun"، سن: 25 ) localStorage. setItem("user", JSON.stringify(user)); // Read (Single) console.log(JSON.parse(localStorage.getItem("user"))) // Update const updatedUser = ( نام: "Ire Aderinokun"، سن: 24 ) localStorage.setItem("user"، JSON stringify(UpdatedUser)); // حذف localStorage.removeItem("user");

مزایای ذخیره سازی محلی

  • یک رابط ذخیره سازی داده ساده تر و بصری تر ارائه می دهد.
  • ذخیره اطلاعات روی مشتری امن تر است.
  • به شما امکان می دهد داده های بیشتری را ذخیره کنید (هر 3 امتیاز - در مقایسه با کوکی ها).

معایب ذخیره سازی محلی

  • اجازه می دهد فقط رشته ها ذخیره شوند

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

ذخیره سازی جلسه

ذخیره‌سازی جلسه دومین نوع از Web Storage API است. دقیقاً مشابه ذخیره سازی محلی است، با این تفاوت که داده ها فقط برای جلسه تب مرورگر ذخیره می شوند. به محض خروج کاربر از صفحه و بستن مرورگر، داده ها پاک می شوند.

عملیات اولیه CRUD با ذخیره سازی جلسه

// Create const user = ( نام: "Ire Aderinokun"، سن: 25 ) sessionStorage. setItem("user", JSON.stringify(user)); // Read (Single) console.log(JSON.parse(sessionStorage.getItem("user"))) // Update const updatedUser = ( نام: "Ire Aderinokun"، سن: 24 ) sessionStorage.setItem("user"، JSON stringify(UpdatedUser)); // حذف sessionStorage.removeItem("user");

مزایا، معایب و پشتیبانی مرورگر دقیقاً مشابه حافظه محلی است.

IndexedDB

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

WebSQL

WebSQL یک API پایگاه داده رابطه ای سمت کلاینت است که مشابه SQLite است. از 2010 گروه کاری W3C این مشخصات را متوقف کرده است و این API دیگر بخشی از مشخصات HTML نیست و نباید استفاده شود.

مروری بر فضای ذخیره سازی وب

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

مکان مناسب برای ذخیره داده های حساس و مهم یک وب سرور خواهد بود. به عنوان مثال، اگر در یک فروشگاه آنلاین مواردی را به سبد خرید خود اضافه کنید، جزئیات خرید احتمالی شما در یک وب سرور ذخیره می شود. فقط چند بایت داده ردیابی در رایانه شما ذخیره می شود که حاوی اطلاعاتی در مورد شما (یا بهتر است بگوییم رایانه شما) باشد، به طوری که وب سرور بداند کدام سطل مال شما است. حتی با وجود ویژگی های جدید HTML5، نیازی به تغییر این سیستم نیست - قابل اعتماد، ایمن و کارآمد است.

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

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

HTML5 جایگزین بهتری برای کوکی ها معرفی می کند که ذخیره اطلاعات در رایانه بازدیدکنندگان را آسان و ساده می کند. این اطلاعات می تواند به طور نامحدود در رایانه مشتری ذخیره شود، به سرور وب ارسال نمی شود (مگر اینکه خود توسعه دهنده این کار را انجام دهد)، می تواند بزرگ باشد، و برای کار با آنها فقط به چند شیء ساده و کارآمد جاوا اسکریپت نیاز دارد.

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

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

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

دو نوع ذخیره سازی وب وجود دارد که به یک شکل به دو شی مرتبط هستند:

ذخیره سازی محلی

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

البته اکثر مرورگرها گزینه پاکسازی فضای ذخیره سازی محلی را نیز در اختیار کاربر قرار می دهند. این به عنوان یک استراتژی همه یا هیچ در برخی از مرورگرها پیاده سازی می شود و تمام داده های محلی را حذف می کند، درست مانند حذف کوکی ها. (در واقع، در برخی از مرورگرها، سیستم کوکی ها و حافظه محلی به هم مرتبط هستند، بنابراین تنها راه حذف داده های محلی حذف کوکی ها است.) و سایر مرورگرها ممکن است امکان مشاهده داده های هر وب سایت و حذف را در اختیار کاربر قرار دهند. داده ها برای سایت یا سایت های انتخاب شده

فروشگاه داده های جلسه

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

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

استفاده از حافظه محلی فراهم می کند بهترین فرصتبرای ذخیره اطلاعات مورد نیاز برای بازدیدهای بعدی کاربر از صفحه وب. و Session store برای ذخیره داده هایی که باید از یک صفحه به صفحه دیگر منتقل شوند استفاده می شود. (ذخیره‌سازی جلسه همچنین می‌تواند داده‌های موقتی را که فقط در یک صفحه استفاده می‌شوند ذخیره کند، اما متغیرهای معمولی جاوا اسکریپت برای این منظور به خوبی کار می‌کنند.)

هر دو فضای ذخیره سازی محلی و ذخیره سازی جلسه با دامنه یک وب سایت مرتبط هستند. بنابراین، اگر داده های صفحه www..html را در حافظه محلی ذخیره کنید، این داده ها برای صفحه www..html در دسترس خواهند بود، زیرا هر دوی این صفحات دامنه یکسانی دارند. اما این داده ها برای صفحات دامنه های دیگر در دسترس نخواهد بود.

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

اگرچه مشخصات HTML5 هیچ قانون سخت و سریعی را برای حداکثر ذخیره سازی تعیین نمی کند، اکثر مرورگرها آن را به 5 مگابایت محدود می کنند. داده های زیادی را می توان در این مقدار بسته بندی کرد، اما اگر بخواهید از حافظه محلی برای بهینه سازی عملکرد استفاده کنید و تصاویر یا ویدیوهای بزرگ را در آن ذخیره کنید، کافی نخواهد بود (و حقیقتاً، ذخیره سازی محلی برای چنین مواردی در نظر گرفته نشده است. اهداف).

برای ذخیره مقادیر زیاد داده، یک استاندارد پایگاه داده هنوز در حال تکامل است IndexedDBاجازه می دهد تا برای ذخیره سازی محلی بسیار بزرگتر - معمولا 50 مگابایت برای شروع، و بیشتر در صورت موافقت کاربر.

ذخیره داده ها

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

سینتکس ذخیره یک داده به صورت زیر است:

localStorage = داده;

// JS localStorage["username"] = "ایوان پتروف";

البته ذخیره یک متن ثابت منطقی نیست. به عنوان یک قاعده، به عنوان مثال، ما باید نوعی از داده های متغیر را ذخیره کنیم تاریخ فعلی، نتیجه یک محاسبه ریاضی یا داده های متنی وارد شده توسط کاربر در فیلدهای فرم. نمونه زیر نمونه ای از ذخیره داده های متنی وارد شده توسط کاربر است:

ذخیره سازی وب

تابع saveData() (// دریافت مقادیر فیلد متن Var localData = document.getElementById("localData"). ارزش؛ var sessionData = سند. getElementById("sessionData"). فیلد متنی در ذخیره‌سازی محلی ذخیره‌سازی‌ها var localData = localStorage ["localData"]؛ var sessionData = sessionStorage["sessionData"]؛ // اگر (localData != null) این داده‌ها را در فیلدهای متنی نمایش دهید (document.getElementById("localData").value = localData ; ) if (sessionData ! = null) ( document.getElementById("sessionData").value = sessionData; ) )

صفحه شامل دو فیلد متنی است: یکی برای ذخیره سازی محلی (بالا) و دیگری برای ذخیره سازی جلسه (پایین). با کلیک بر روی دکمه "ذخیره" متن وارد شده در فیلدهای متنی ذخیره می شود و با کلیک بر روی دکمه "بارگیری" اطلاعات ذخیره شده مربوطه در فیلدها نمایش داده می شود.

Web Storage همچنین از نحو ویژگی کمتر رایج پشتیبانی می کند. طبق قوانین این نحو، ما به محل ذخیره سازی با نام username به عنوان localStorage.username اشاره می کنیم، نه localStorage["username"]. هر دو نوع نحو معادل هستند و استفاده از یکی یا دیگری یک موضوع ترجیحی شخصی است.

ذخیره سازی وب بدون وب سرور کار نمی کند

در تحقیقات ذخیره سازی وب خود، ممکن است با مشکل غیر منتظره. در بسیاری از مرورگرها، ذخیره سازی وب فقط برای صفحات ارائه شده توسط وب سرور کار می کند. فرقی نمی کند سرور در کجا قرار دارد، در اینترنت یا روی شما کامپیوتر خودمهمتر از همه، فقط برای اطمینان از اینکه صفحات از محلی اجرا نمی شوند هارد دیسک(مثلا، دوبار کلیک کنیدتوسط نماد فایل صفحه).

این ویژگی است عوارض جانبیروشی که مرورگرها به فضای ذخیره سازی محلی اختصاص می دهند. همانطور که قبلاً بحث شد، مرورگرها فضای ذخیره‌سازی محلی را برای هر وب‌سایت به 5 مگابایت محدود می‌کنند، که لازم است هر صفحه‌ای را که می‌خواهد از فضای ذخیره‌سازی محلی استفاده کند با دامنه وب‌سایت مرتبط کند.

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

که در مرورگر فایرفاکساشیاء localStorage و sessionStorage در جای خود باقی می مانند و به نظر می رسد که پشتیبانی می شوند (حتی Modernizr تعیین می کند که چه چیزی پشتیبانی می شود)، اما هر چیزی که به ذخیره سازی ارسال می شود ناپدید می شود تا هیچ کس نمی داند کجاست. که در مرورگر کرومدوباره، چیز دیگری - بیشتر عملکرد ذخیره سازی وب آنطور که باید کار می کند، اما برخی از ویژگی ها (مانند رویداد onStorage) کار نمی کنند.

مشکلات مشابهی با استفاده از File API ایجاد می شود. بنابراین، اگر صفحه مورد آزمایش را روی یک سرور آزمایشی قرار دهید تا از همه این عدم قطعیت ها جلوگیری کنید، از دردسر زیادی نجات خواهید یافت.

پشتیبانی از ذخیره سازی وب توسط مرورگرها

ذخیره سازی وب یکی از ویژگی های پشتیبانی شده HTML5 است که سطح پشتیبانی خوبی در هر مرورگر اصلی دارد. جدول زیر حداقل نسخه‌های مرورگرهای اصلی را که از ذخیره‌سازی وب پشتیبانی می‌کنند فهرست می‌کند:

همه این مرورگرها ذخیره‌سازی محلی و ذخیره‌سازی داده‌های جلسه را فراهم می‌کنند. با این حال، پشتیبانی از رویداد onStorage به مرورگرهای بعدی مانند IE 9، Firefox 4 یا Chrome 6 نیاز دارد.

مشکل سازترین نسخه IE 7 است که اصلاً از ذخیره سازی وب پشتیبانی نمی کند. به عنوان یک راه حل، می توانید با استفاده از کوکی ها، فضای ذخیره سازی وب را شبیه سازی کنید. این کاملا نیست راه حل کامل، اما کار می کند. در حالی که هیچ اسکریپت رسمی برای پر کردن این شکاف وجود ندارد، چند نقطه شروع خوب را می توان در صفحه مرورگر متقابل HTML5 (در زیر "ذخیره سازی وب") پیدا کرد.

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

معرفی

LocalStorage- ذخیره سازی محلی آن ها این یک مکان خاص در مرورگر است (چیزی شبیه یک پایگاه داده کوچک) که در آن می توانیم برخی از داده ها را بنویسیم، بخوانیم و حذف کنیم. در واقع، ذخیره سازی محلی بسیار شبیه به کلوچه ها، اما تفاوت هایی وجود دارد. بیایید اینجا در مورد آنها صحبت کنیم. کوکیبسیار محدود. یکی کوکیشاید همه چیز 4096 کاراکترها و تعداد آنها در هر دامنه تقریباً است 30-50 بسته به مرورگر در ذخیره سازی محلی می توانیم ذخیره کنیم 5-10 مگابایتیا حتی بیشتر برای مدت طولانی.

کجا از آنها استفاده کنیم

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

نحوه استفاده از localStorage

داده ها به همان روش ذخیره می شوند کوکی - ارزش کلیدی. برای افزودن یک مقدار جدید، به صورت زیر بنویسید:

LocalStorage.setItem("کلید"، "مقدار");

ما استفاده می کنیم شیء localStorageو روش او مجموعه آیتم، جایی که کلید و مقدار را پاس می کنیم.

برای بدست آوردن داده ها موارد زیر را می نویسیم:

Var value = localStorage.getItem("key");

در نتیجه، به متغیر مقدارمقداری را که در زیر کلیدی که به متد ارسال می کنیم ذخیره می شود، دریافت می کند getItem.

داده ها را حذف کنید

LocalStorage ("کلید")؛ // داده های زیر کلید عبور را حذف می کند
localStorage.clear(); // فضای ذخیره سازی محلی را کاملاً پاک کنید

برای بررسی اینکه آیا حافظه محلی پر است، می توانید از ثابت استفاده کنید QUOTA_EXCEEDED_ERR

تلاش كردن(
localStorage.setItem("کلید"، "مقدار");
) گرفتن (ه) (
اگر (e == QUOTA_EXCEEDED_ERR) (
هشدار ("محدودیت بیش از حد");
}
}

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

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

نتیجه

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

اغلب، اولین برنامه جاوا اسکریپت یک لیست Todo است، اما مشکل چنین برنامه هایی این است که پس از رفرش کردن صفحه، تمام موارد موجود در لیست ناپدید می شوند.

یک راه حل ساده برای این مشکل استفاده است ذخیره سازی محلی(ذخیره سازی محلی). ذخیره سازی محلی به شما این امکان را می دهد که داده ها را در دستگاه کاربر ذخیره کنید و پس از رفرش صفحه به راحتی می توانید لیست را از آن بارگیری کنید. در این مقاله، با استفاده از ذخیره سازی محلی، فهرست کارهای کوچکی را می نویسیم.

ذخیره سازی محلی چیست؟

فضای ذخیره سازی محلی ("ذخیره سازی وب") در ابتدا بخشی از مشخصات HTML5 بود، اما اکنون به یک فضای جداگانه منتقل شده است. شما می توانید داده ها را به دو روش ذخیره کنید:

  • ذخیره سازی محلی: ذخیره سازی پایدار، چیزی که ما از آن استفاده خواهیم کرد.
  • ذخیره سازی جلسه: داده ها را فقط برای این جلسه ذخیره می کند، اگر کاربر صفحه را ببندد، داده ها از بین می روند.

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

HTML

برای ایجاد یک لیست کار به موارد زیر نیاز داریم:

  • یک ورودی متن برای وارد کردن محتوای عنصر.
  • دکمه اضافه کردن یک مورد به لیست
  • دکمه برای پاک کردن لیست.
  • خود لیست
      ).
    • و یک div اضافی برای نشان دادن خطاها.

    بنابراین نشانه گذاری HTML به شکل زیر خواهد بود:

    ساختار بسیار ساده ای که ما با جاوا اسکریپت آن را زنده خواهیم کرد.

    زیرا ما از jQuery استفاده می کنیم، باید آن را اضافه کنیم.

    جاوا اسکریپت

    ابتدا باید کلیک روی دکمه افزودن را دنبال کنیم و بررسی کنیم که فیلد ورودی خالی نباشد:

    $("#add").click(function() ( var Description = $("#description").val(); if($("#description").val() == "") ($( "#alert").html(" هشدار!شما کارها را خالی گذاشتید"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; )

    این کد مقدار ورودی متن را بررسی می کند و در صورت خالی بودن خطا نشان می دهد و false را برمی گرداند تا بقیه کد اجرا نشود و عنصر به لیست اضافه نشود.

    // ورودی $("#todos").prepend(" را وارد کنید

  • " + توضیحات + "
    • ")؛ // حذف هر چیزی که در فیلد متن باقی مانده است $("#form").reset(); var todos = $("#todos").html(); localStorage.setItem("todos", todos); بازگشت نادرست؛))؛

    برای کار با حافظه محلی، باید یک کلید و مقدار مربوط به آن ارائه دهید. در مورد ما، بیایید کلید را 'todos' صدا کنیم، و مقدار تمام کدهای HTML موجود در لیست (در تگ) خواهد بود.

      ). دریافت این کد آسان است جی کوئری. و در نهایت برای جلوگیری از ارسال فرم و بارگذاری مجدد صفحه، false را برمی گردانیم.

      مرحله بعدی بررسی حافظه محلی است، اگر مقداری با کلید "todos" وجود دارد، لیست را از حافظه محلی بارگیری کنید:

      If (localStorage.getItem("todos")) ($("#todos").html(localStorage.getItem("todos"))؛ )

      زیرا ما HTML تمام شده را در مخزن ذخیره می کنیم، سپس این کد را در لیست قرار می دهیم.

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

      $("#clear").click(function() ( window.localStorage.clear(); location.reload(); return false; ));

      آماده! کد کامل به صورت زیر است:

      $(document).ready(function() ($("#add"). کلیک کنید(function() ( var Description = $("#description").val(); if ($("#description"). val() == "") ($("#alert").html(" هشدار!شما کارها را خالی گذاشتید"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; ) $("#todos").prepend("

    • " + توضیحات + "
      • "); $("#form").reset(); var todos = $("#todos").html(); localStorage.setItem ("todos"، todos)؛ return false; ))؛ if (localStorage .getItem("todos")) ($("#todos").html(localStorage.getItem("todos")); ) $("#clear").click(function() (window.localStorage.clear( location.reload()؛ return false; )); ));

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

      ذخیره سازی وب توسط تمام مرورگرهای اصلی حتی IE8 پشتیبانی می شود. فقط باید از IE7 و پایین تر بترسید.

      نتیجه

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

عنوان: ویراستاران
اشتراک گذاری