در جلسه قبلی آموزش HTML با راه های پخش ویدئو در html آشنا شدیم. در این بخش به ذخیره اطلاعات با web storage در html خواهیم پرداخت.
Web storage در HTML5 برای ذخیره داده ها در مروگر کاربر استفاده می شود
Web storage در HTML5 چیست
قابلیت Web storage در HTML5 به شما امکان ذخیره اطلاعات بصورت لوکال روی کامپیوتر کاربر را می دهد, مشابه کوکی, اما سریعتر و خیلی بهتر از کوکی ها.
به هر حال, Web storage ها بیشتر از کوکی ها امن نیستند. لطفا برای دریافت اطلاعات بیشتر در مورد کوکی ها, آموزش cookie در php را مطالعه کنید.
داده های ذخیره شده در Web storage به سمت سرور ارسال نمی شود در حالی که داده های کوکی در هر درخواست به سرور ارسال می شود.
همچنین کوکی ها به شما اجازه ذخیره حجم کمی از داده ها (نزدیک ۴KB) را می دهد در حالی که Web storage در HTML5 حداکثر ۵MB داده را ذخیره می کند.
دو نوع از Web storage در HTML5 وجود دارد که در محدوده و طول عمر متفاوت اند :
- Local storage (ذخیره سازی محلی) – از آبجکت
localStorageبرای ذخیره داده برای کل وبسایت بصورت دایمی استفاده می شود.
به این معنا که داده های ذخیره شده بصورت محلی در روز بعد, هفته بعد, یا سال بعد در صورتی که حذف نکنیم, در دسترس خواهند بود.
- Session Storage – از آبجکت
sessionStorageبرای ذخیره داده بصورت موقت, برای هر پنجره جدا (یا تب) استفاده می شود.
زمانی که کاربر تب یا پنجره مربوط به آن صفحه را بست, سیشن ها نیز از بین می روند.
نکته: قابلیت Web storage در HTML5 در تمام مرورگرهای مدرن مثل فایرفاکس, کروم, اپرا, سافاری و اینترنت اکسپلورر ۸+ پشتیبانی می شود.
آبجکت localStorage
همانطور که در ابتدا گفته است, آبجکت localStorage داده ها را بدون هیچ تاریخ انقضایی ذخیره می کند. هر تکه از داده های ذخیره شده بصورت جفت کلید/مقدار هستند.
کلید ها (key) مشخص کننده نام داده (مثلا ‘email’) و مقدار (value) نیز مشخص کننده مقدار آن کلید هستند (مثلا ’netparadis@gmail.com’ )
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script type="text/javascript"> // Check if the localStorage object exists if(localStorage){ // Store data localStorage.setItem("first_name", "Peter"); // Retrieve data alert("Hi, " + localStorage.getItem("first_name")); } else{ alert("Sorry, your browser do not support local storage."); } </script> |
توضیح مثال بالا:
کد جاوااسکریپت بالا به این معناست :
localStorage.setItem(key, value): یک مقدار را به همراه کلید آن ذخیره می کندlocalStorage.getItem(key): مقدار یک کلید ذخیره شده را دریافت می کند.
شما همچنین می توانید یک آیتم مشخص را از فضای ذخیره سازی فقط با دادن نام کلید به متد removeItem() حذف کنید مثل localStorage.removeItem(key) .
به هر حال, اگر می خواهید کل داده های ذخیره شده را یکجا حذف کنید از متد clear() بصورت localStorage.clear() استفاده کنید.
متد clear() کل جفت کلید/مقدار ها را از فضای ذخیره سازی محلی, یکجا حذف می کند, پس قبل از استفاده از آن خوب فکر کنید.
نکته: داده های web storage (هر دو محلی و سیشن) بین مرورگرها در دسترس نیستند, برای مثال داده ذخیره شده در فایرفاکس نمی تواند در مرورگر کروم یا غیره قابل دسترس باشد.
آبجکت sessionStorage
آبجکت sessionStorage همانند localStorage کار می کند, با این تفاوت که داده ها را فقط در یک سیشن ذخیره می کند. بنابراین داده فقط تا زمانی که تب یا پنجره مرورگر بسته نشده باشد در دسترس خواهند بود.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script type="text/javascript"> // Check if the sessionStorage object exists if(sessionStorage){ // Store data sessionStorage.setItem("last_name", "Parker"); // Retrieve data alert("Hi, " + localStorage.getItem("first_name") + " " + sessionStorage.getItem("last_name")); } else{ alert("Sorry, your browser do not support session storage."); } </script> |
امیدوارم در این بخش آموزش HTML , از آموزش ذخیره اطلاعات با web storage در HTML5 نهایت استفاده را برده باشید.
در بخش بعدی با کش کردن در HTML آشنا می شویم.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
سلام
چطور میتونم ظرفیت حافظه سنشن استوریج را افزایش بدم
سلام. ظرفیت بستگی به مرورگرهای مختلف بصورت زیر است:
Browser LocalStorage SessionStorage
——- ———— ————–
Chrome 5M 5M
Firefox 5M Unlimited
IE11 5M 5M
این عدد شاید نصف هم باشه
سلام چطور می تونم داده های اینپوت هارو ذخیره کنم و دوباره تغییر بدم؟
سلام. باید با جاواسکریپت محتوای input رو بخونید داخل یه متغییر بزارید و بعد این متغییر رو داخل setItem استفاده کنید