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

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

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

مکان مناسب برای ذخیره داده های حساس و مهم یک وب سرور خواهد بود. به عنوان مثال، اگر در یک فروشگاه آنلاین مواردی را به سبد خرید خود اضافه کنید، جزئیات خرید احتمالی شما در یک وب سرور ذخیره می شود. تنها چند بایت داده ردیابی در رایانه شما ذخیره می شود که حاوی اطلاعاتی درباره شما (یا بهتر است بگوییم رایانه شما) باشد، به طوری که وب سرور بداند کدام سطل مال شما است. حتی با وجود ویژگی های جدید 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 ناپدید می شوند و تلاش برای استفاده از آنها باعث خطای جاوا اسکریپت می شود.

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

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

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

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

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

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

این Web Storage APIمکانیسم‌هایی را فراهم می‌کند که به‌وسیله آن مرورگرها می‌توانند جفت‌های کلید/مقدار را به روشی بسیار شهودی‌تر از استفاده از کوکی‌ها ذخیره کنند.

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

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

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

مشخصات فنی

سازگاری مرورگر

Window.localStorage

https://github.com/mdn/browser-compat-data و یک درخواست کشش برای ما ارسال کنید.

افسانه

Window.sessionStorage

جدول سازگاری در این صفحه از داده های ساخت یافته تولید می شود. اگر می‌خواهید در داده‌ها مشارکت کنید، لطفاً https://github.com/mdn/browser-compat-data را بررسی کنید و یک درخواست برای ما ارسال کنید.

داده های سازگاری را در GitHub به روز کنید

افسانه

حالت های مرور خصوصی / ناشناس

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

اکثر مرورگرها استراتژی را انتخاب کرده اند که در آن API های ذخیره سازی هنوز در دسترس هستند و ظاهراً کاملاً کاربردی هستند، با یک تفاوت بزرگ که تمام داده های ذخیره شده پس از بسته شدن مرورگر پاک می شوند. برای این مرورگرها هنوز تفسیرهای متفاوتی از آنچه باید با داده های ذخیره شده موجود انجام شود (از یک جلسه مرور معمولی) وجود دارد. آیا در حالت خصوصی باید برای خواندن در دسترس باشد؟ سپس برخی از مرورگرها، به ویژه Safari، راه حلی را انتخاب کرده اند که در آن فضای ذخیره سازی در دسترس است، اما خالی است و یک سهمیه 0 بایت اختصاص داده شده است، که عملاً نوشتن داده در آن را غیرممکن می کند.

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

ترجمه: ولاد مرژویچ

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

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

• کوکی‌ها با هر درخواست HTTP گنجانده می‌شوند، بنابراین با ارسال بی‌ضرور داده‌های مشابه، سرعت برنامه وب شما را کاهش می‌دهند.
• هنگامی که داده ها به صورت رمزگذاری نشده از طریق اینترنت منتقل می شوند (حتی اگر کل برنامه وب از طریق SSL منتقل شود)، کوکی ها در هر درخواست HTTP گنجانده می شوند.
• کوکی ها به حدود 4 کیلوبایت داده محدود می شوند - برای کاهش سرعت برنامه شما کافی است (به بالا مراجعه کنید)، اما برای مفید بودن کافی نیست.

این چیزی است که ما واقعاً می خواهیم:

• فضای ذخیره سازی فراوان؛
• کار در سمت مشتری؛
• به روز رسانی صفحه را در نظر بگیرید.
• بدون ارسال به سرور

قبل از HTML5، تمام تلاش‌ها برای دستیابی به این هدف به طرق مختلف با شکست مواجه می‌شد.

تاریخچه مختصری از ذخیره سازی محلی قبل از HTML5

در ابتدا فقط یک اینترنت اکسپلورر وجود داشت. حداقل مایکروسافت می خواست که دنیا اینطور فکر کند. برای این منظور، به عنوان بخشی از اولین جنگ بزرگ مرورگرها، مایکروسافت چیزهای زیادی اختراع کرد و آنها را در مرورگر خود که جنگ را پایان داد، Internet Explorer گنجاند. یکی از این موارد رفتارهای DHTML و یکی از رفتارها userData نام دارد.

UserData به یک صفحه وب اجازه می دهد تا حداکثر 64 کیلوبایت داده در هر دامنه را در یک ساختار سلسله مراتبی XML مانند ذخیره کند. دامنه های مورد اعتماد مانند سایت های اینترانت می توانند ده برابر بیشتر ذخیره کنند. و سلام، 640 کیلوبایت باید برای همه کافی باشد. IE هیچ راهی برای تغییر این قراردادها ارائه نکرده است، بنابراین هیچ راهی برای افزایش حافظه موجود وجود ندارد.

در سال 2002، ادوبی قابلیتی را در فلش 6 معرفی کرد که ناموفق بود و به طور گمراه کننده ای "کوکی های فلش" نامگذاری شد. AT محیط فلشاین قابلیت به درستی به عنوان اشیاء مشترک محلی (اشیاء قابل دسترسی محلی، LSO) شناخته می شود. به طور خلاصه، به اشیاء Flash اجازه می دهد تا حداکثر 100 کیلوبایت داده در هر دامنه را ذخیره کنند. براد نوبرگ نمونه اولیه پلی بین فلش و جاوا اسکریپت را توسعه داد که آن را AMASS (سیستم ذخیره‌سازی عظیم AJAX) نامید، اما برخی از ویژگی‌های طراحی فلش آن را محدود می‌کرد. در سال 2006، با ظهور ExternalInterface در Flash 8، دسترسی به LSO از طریق جاوا اسکریپت آسان‌تر و سریع‌تر شده بود. برد AMASS را بازنویسی کرد و آن را با نام مستعار dojox.storage در جعبه ابزار محبوب Dojo ادغام کرد. فلش "رایگان" به هر دامنه 100 کیلوبایت فضای ذخیره سازی می دهد. علاوه بر این، از کاربر می خواهد که در صورت درخواست، مقدار ذخیره سازی را با یک مرتبه بزرگی (1 مگابایت، 10 مگابایت و غیره) افزایش دهد.

if (Modernizr.localstorage) (
// window.localStorage در دسترس است!
) دیگر (
// بدون پشتیبانی داخلی برای ذخیره سازی HTML5
}

استفاده از فضای ذخیره سازی HTML5

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

رابط ذخیره سازی (
دریافت از طریق getItem(key)؛
تنظیم از طریق setItem (کلید، داده)؛
};

فراخوانی setItem() با یک نام کلید موجود، مقدار قبلی را در سکوت بازنویسی می کند. فراخوانی getItem() با یک کلید غیر موجود، به جای ایجاد استثنا، NULL را برمی گرداند.

مانند سایر اشیاء جاوا اسکریپت، می توانید به شیء localStorage به عنوان یک آرایه انجمنی دسترسی داشته باشید. به جای استفاده از متدهای getItem() و setItem()، فقط می توانید از براکت استفاده کنید. به عنوان مثال این قطعه کد

var foo = localStorage.getItem("bar");
// ...
localStorage.setItem("bar", foo);

می توان با استفاده از نحو براکت بازنویسی کرد:

var foo = localStorage["bar"];
// ...
localStorage["bar"] = foo;

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

رابط ذخیره سازی (
حذف از طریق removeItem(key);
clear();
}

فراخوانی removeItem() با کلیدی که وجود ندارد چیزی را بر نمی گرداند.

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

رابط ذخیره سازی (
طول
دریافت کلید (عدد صحیح غیر منفی)؛
}

اگر زمانی که key() فراخوانی می شود، ایندکس در محدوده 0 تا (طول-1) نباشد، تابع null را برمی گرداند.

ردیابی فضای ذخیره سازی HTML5

اگر می‌خواهید تغییرات فضای ذخیره‌سازی را به صورت برنامه‌ریزی دنبال کنید، باید رویداد ذخیره‌سازی را مشاهده کنید. هنگامی که setItem() , removeItem() , یا clear() فراخوانی می شوند و چیزی را تغییر می دهند این رویداد بر روی شی پنجره افزایش می یابد. به عنوان مثال، اگر شما تنظیم کنید ارزش موجودیا زمانی که کلیدی وجود ندارد، clear() را فراخوانی کنید، رویداد فعال نمی شود زیرا فضای ذخیره سازی در واقع تغییر نکرده است.

رویداد ذخیره سازی در هر جایی که شی localStorage در حال اجرا باشد، از جمله اینترنت اکسپلورر 8 پشتیبانی می شود. IE 8 از استاندارد W3C addEventListener پشتیبانی نمی کند (اگرچه در نهایت در IE 9 اضافه خواهد شد)، بنابراین برای دریافت رویداد ذخیره سازی، باید بررسی کنید که کدام یک موتور رویداد از مرورگر پشتیبانی می‌کند (اگر قبلاً این کار را با رویدادهای دیگر انجام داده‌اید، می‌توانید این بخش را تا انتها رد کنید). به دام انداختن رویداد ذخیره سازی مانند به دام انداختن رویدادهای دیگر عمل می کند. اگر ترجیح می دهید از jQuery یا سایر کتابخانه های جاوا اسکریپت برای ثبت کنترل کننده رویداد استفاده کنید، می توانید این کار را با ذخیره سازی نیز انجام دهید.

if (window.addEventListener) (
window.addEventListener("ذخیره"، handle_storage، false);
) دیگر (
window.attachEvent("onstorage", handle_storage);
};

فراخوانی handle_storage با یک شی StorageEvent فراخوانی می شود، به جز در اینترنت اکسپلورر، جایی که رویدادها در window.event ذخیره می شوند.

تابع handle_storage(e) (
اگر (!e) (e = window.event; )
}

در این حالت، متغیر e یک شی StorageEvent خواهد بود که دارای خواص مفید زیر است.

*نکته: ویژگی url در ابتدا uri نام داشت و برخی از مرورگرها قبل از تغییر مشخصات از این ویژگی پشتیبانی می کردند. برای حداکثر سازگاری، باید بررسی کنید که آیا ویژگی url وجود دارد یا خیر، و اگر نه، به جای آن ویژگی uri را بررسی کنید.

رویداد ذخیره سازی را نمی توان لغو کرد، هیچ راهی در داخل handle_storage برای توقف تغییر وجود ندارد. این فقط راهی است که مرورگر به شما می گوید: "هی، این اتفاق افتاده است. هیچ کاری نمی توانی انجام دهی، فقط می خواستم بدانی."

محدودیت در مرورگرهای فعلی

در مورد تاریخچه ذخیره سازی محلی با افزونه های شخص ثالث، محدودیت های هر تکنیک را ذکر کردم. به یاد آوردم که چیزی در مورد محدودیت های ذخیره سازی استاندارد HTML5 نگفته بودم. پاسخ ها را به شما می دهم و سپس توضیح می دهم. پاسخ ها به ترتیب اهمیت عبارتند از: "5 مگابایت"، "QUOTA_EXCEEDED_ERR" و "هیچ".

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

«QUOTA_EXCEEDED_ERR» استثنایی است که اگر از سهمیه 5 مگابایتی خود فراتر بروید، دریافت می‌کنید. "نه" پاسخ به سوال واضح بعدی است: "آیا می توانم از کاربر فضای ذخیره سازی بیشتری بخواهم؟". در زمان نگارش این مقاله، مرورگرها هیچ مکانیزمی را برای توسعه دهندگان وب برای درخواست فضای ذخیره سازی بیشتر پیاده سازی نمی کنند. برخی از مرورگرها (مانند اپرا) به کاربر اجازه می‌دهند تا سهمیه‌های ذخیره‌سازی هر سایت را کنترل کند، اما این صرفاً مبتنی بر ابتکار کاربر است و به چیزی که شما به‌عنوان یک توسعه‌دهنده می‌توانید در برنامه وب خود بسازید، مرتبط نیست.

ذخیره سازی HTML5 در عمل

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

چگونه کار می کند؟ هر بار که تغییری در بازی ایجاد شود، این تابع را فراخوانی می کنیم.

تابع saveGameState() (

localStorage["halma.game.in.progress"] = gGameInProgress;
برای (var i = 0; i< kNumPieces; i++) {
localStorage["halma.piece." + i + ".row"] = gPieces[i].row;
localStorage["halma.piece." + i + ".column"] = gPieces[i].column;
}
localStorage["halma.selectedpiece"] = gSelectedPieceIndex;
localStorage["halma.selectedpiecehasmoved"] = gSelectedPieceHasMoved;
localStorage["halma.movecount"] = gMoveCount;
بازگشت درست؛
}

همانطور که می بینید، شی localStorage برای ذخیره پیشرفت بازی استفاده می شود (gGameInProgress، boolean). در مرحله بعد، روی همه تراشه ها (gPieces، آرایه جاوا اسکریپت) تکرار می شود و برای هر یک سطر و ستون ذخیره می کند. پس از آن، برخی از حالت‌های بازی اضافی ذخیره می‌شوند، از جمله قطعه انتخاب‌شده فعلی (gSelectedPieceIndex، یک عدد صحیح)، قطعه‌ای که در وسط یک سری پرش‌های طولانی قرار دارد (gSelectedPieceHasMoved، boolean)، و تعداد کلحرکت انجام شده (gMoveCount، عدد صحیح).

هنگامی که صفحه بارگیری می شود، به جای فراخوانی خودکار تابع newGame() که همه متغیرها را به مقادیر اصلی خود برمی گرداند، resumeGame() را فراخوانی می کنیم. تابع resumeGame() از فروشگاه HTML5 برای بررسی وضعیت بازی در فروشگاه محلی استفاده می کند. در صورت وجود، مقادیر را با استفاده از شی localStorage بازیابی می کند.

تابع resumeGame() (
اگر (!supportsLocalStorage()) (fase را برگردانید؛ )
gGameInProgress = (localStorage["halma.game.in.progress"] == "true");
اگر (!gGameInProgress) ( نادرست برگردانید؛ )
gPieces = آرایه جدید (kNumPieces);
برای (var i = 0; i< kNumPieces; i++) {
var row = parseInt(localStorage["halma.piece." + i + ".row"]);
var column = parseInt(localStorage["halma.piece." + i + ".column"]);
gPieces[i] = سلول جدید (ردیف، ستون)؛
}
gNumPieces = kNumPieces;
gSelectedPieceIndex = parseInt(localStorage["halma.selectedpiece"]);
gSelectedPieceHasMoved = localStorage["halma.selectedpiecehasmoved"] == "درست";
gMoveCount = parseInt(localStorage["halma.movecount"]);
drawBoard();
بازگشت درست؛
}

مهمترین بخش این ویژگی هشداری است که قبلاً در این فصل به آن اشاره کردم و در اینجا تکرار می کنم: داده ها به صورت رشته ای ذخیره می شوند. اگر چیزی غیر از رشته ها را ذخیره می کنید، پس از دریافت آنها باید آنها را تبدیل کنید. به عنوان مثال، پرچم بازی در حال پیشرفت (gGameInProgress) یک بولی است. در تابع saveGameState() فقط آن را ذخیره می کنیم و نگران نوع داده نیستیم.

localStorage["halma.game.in.progress"] = gGameInProgress;

اما در تابع resumeGame() باید مقدار بازیابی شده از حافظه محلی را به عنوان یک رشته در نظر بگیریم و مقدار بولی خود را به صورت دستی بسازیم.

gGameInProgress = (localStorage["halma.game.in.progress"] == "true");

به طور مشابه، تعداد حرکات در gMoveCount به عنوان یک عدد صحیح ذخیره می‌شود، در تابع saveGameState() به سادگی آن را ذخیره می‌کنیم.

localStorage["halma.movecount"] = gMoveCount;

اما در تابع resumeGame () باید مقدار را با استفاده از تابع ()parseInt داخلی جاوا اسکریپت به یک عدد صحیح تبدیل کنیم.

gMoveCount = parseInt(localStorage["halma.movecount"]);

فراتر از جفت کلید/ ارزش: چشم انداز رقابتی

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

One vision مخففی است که شما قبلاً می شناسید - SQL. در سال 2007، گوگل Gears را راه اندازی کرد، یک افزونه متن باز بین مرورگرها که شامل یک پایگاه داده مبتنی بر SQLite است. این نمونه اولیه بعداً بر ایجاد مشخصات پایگاه داده وب SQL تأثیر گذاشت. پایگاه داده Web SQL (که قبلا به عنوان "WebDB" شناخته می شد) یک پوشش نازک در اطراف پایگاه داده ارائه می کند. داده های SQL، که به شما امکان می دهد کارهای زیر را از جاوا اسکریپت انجام دهید:

openDatabase("documents"، "1.0"، "Local document storage", 5*1024*1024, function (db) (
db.changeVersion("", "1.0", تابع (t) (
t.executeSql("CREATE TABLE docids (id, name)");
) خطا)
});

همانطور که می بینید، اکثر اکشن ها با متد ExecuteSQL روی خط هستند. این رشته می تواند از هر دستور SQL از جمله SELECT، UPDATE، INSERT و DELETE پشتیبانی کند. مثل اونه برنامه نویسی سرورپایگاه های داده، به جز اینکه این کار را با جاوا اسکریپت انجام می دهید! ای شادی!

مشخصات پایگاه داده Web SQL در چهار مرورگر و پلتفرم پیاده سازی شده است.

البته، اگر در زندگی خود از بیش از یک پایگاه داده استفاده کرده اید، پس می دانید که "SQL" بیشتر یک اصطلاح بازاریابی است تا یک استاندارد سخت و سریع (شاید همین را در مورد HTML5 بگوید، اما این مهم نیست). البته، یک مشخصات واقعی SQL وجود دارد (به آن SQL-92 می گویند)، اما هیچ سرور پایگاه داده ای در جهان وجود ندارد که فقط با این مشخصات مطابقت داشته باشد. Oracle SQL، Microsoft SQL، SQL در MySQL، SQL در PostgreSQL، SQL در SQLite وجود دارد. در واقع، هر یک از این محصولات به مرور زمان ویژگی‌های جدید SQL را اضافه می‌کنند، بنابراین فقط گفتن «SQL در SQLite» کافی نیست. باید بگویید "نسخه SQL که با نسخه SQLite X.Y.Z ارائه می شود".

همه اینها ما را به هشدار بعدی می رساند که در حال حاضر در بالای مشخصات Web SQL قرار دارد.

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

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

Indexed Database API چیزی را فراهم می کند که به آن یک شی ذخیره می گویند، با بسیاری از ایده های قرض گرفته شده از پایگاه های داده SQL. "پایگاه های داده" با "سوابق" وجود دارد، هر رکورد دارای تعداد مشخصی "فیلد" است. هر فیلد دارای یک نوع داده خاص است که هنگام ایجاد پایگاه داده تعریف می شود. می توانید بخشی از ورودی ها را انتخاب کنید، سپس آنها را با "مکان نما" فهرست کنید. تغییرات در فروشگاه شی با "معاملات" پردازش می شود.

اگر تا به حال پایگاه داده های SQL را برنامه ریزی کرده اید، احتمالاً این اصطلاحات برای شما آشنا هستند. تفاوت اصلی این است که ذخیره سازی اشیا دارای یک زبان پرس و جو ساختاریافته نیست. شرطی مانند "SELECT * from USERS که در آن ACTIVE = "Y" را نمی نویسید. در عوض، ما از روش‌های ارائه‌شده توسط شی ذخیره‌سازی برای باز کردن پایگاه داده USERS، شمارش رکوردها، فیلتر کردن رکوردها و استفاده از روش‌های دسترسی برای بدست آوردن مقدار هر فیلد از رکوردهای باقی‌مانده استفاده می‌کنیم. بررسی اولیه IndexedDB راهنمای خوبی در مورد نحوه عملکرد IndexedDB و مقایسه IndexedDB با Web SQL است.

در زمان نگارش این مقاله، IndexedDB فقط در فایرفاکس 4 بتا پیاده سازی شده است، در مقابل، موزیلا اعلام کرده است که هرگز Web SQL را پیاده سازی نخواهد کرد. گوگل اعلام کرده است که در حال بررسی پشتیبانی از IndexedDB برای Chromium و گوگل کروم. و حتی مایکروسافت گفته است که IndexedDB "راه حلی عالی برای وب است."

شما به عنوان یک توسعه دهنده وب با IndexedDB چه کاری می توانید انجام دهید؟ در حال حاضر، تقریبا هیچ چیز، به جز برخی از نمایش های تکنولوژیکی. در یک سال؟ شاید.

آخرین به روز رسانی: 1.11.2015

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

بنابراین HTML5 معرفی شد مفهوم جدیدبرای ذخیره سازی داده ها - ذخیره سازی وب. ذخیره سازی وب از دو جزء تشکیل شده است: ذخیره سازی جلسه و ذخیره سازی محلی.

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

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

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

برای کار با حافظه محلی در جاوا اسکریپت از شی localStorage و برای کار با ذخیره سازی جلسه از شی sessionStorage استفاده می شود.

برای ذخیره داده، آن را به متد setItem() شی localStorage ارسال کنید:

LocalStorage.setItem("ورود"، " [ایمیل محافظت شده]");

دو مقدار به این روش ارسال می شود: کلید و مقدار شیء ذخیره شده.

اگر localStorage قبلاً یک شی با کلید "ورود" داشته باشد، مقدار آن با یک شی جدید جایگزین می شود.

برای دریافت داده های ذخیره شده، باید متد getItem() را فراخوانی کنید:

var login = localStorage.getItem("login"); // [ایمیل محافظت شده]

کلید شی به این متد منتقل می شود.

برای حذف یک شی، از متد removeItem() استفاده کنید که کلید شی مورد حذف را می گیرد:

LocalStorage.removeItem("ورود");

و برای حذف کاملاز بین تمام اشیاء از localStorage، می توانید از متد clear() استفاده کنید:

LocalStorage.clear();

ذخیره اشیاء ساده ساده است، اما به خاطر داشته باشید که داده ها در localStorage به عنوان یک رشته ذخیره می شوند:

LocalStorage.setItem("age", 23); var age = localStorage.getItem("سن"); age=parseInt(سن)+10; document.write(سن); //33

اگر در این مورد، مقدار با استفاده از parseInt() به عدد تبدیل نشود، age به عنوان یک رشته عمل می کند.

ممکن است با ذخیره اشیاء پیچیده مشکلاتی ایجاد شود:

کاربر Var =( نام: "تام"، سن: 23، متاهل: نادرست ); localStorage.setItem("کاربر"، کاربر); var savedUser = localStorage.getItem("user"); document.write(savedUser); // document.write(savedUser.name); // undefined - saveUser یک رشته است نه یک شی

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

کاربر Var =( نام: "تام"، سن: 23، متاهل: نادرست ); localStorage.setItem("user"، JSON.stringify(user)); var savedUser = JSON.parse(localStorage.getItem("user")); document.write(savedUser.name + " " + savedUser.age +" " + saveUser.married); // تام 23 نادرست