با عرض سلام خدمت کاربران سایت پی وی لرن . در ادامه دوره آموزش کامل html ، مبحث کار با چند رسانه ای در html را بطور کامل ارائه کردیم. و با نحوه کار کردن با انواع چند رسانه ای و کار با پلاگین در html ، آشنا شدید. در حال حاضر ادامه مبحث API را دنبال می کنیم. درجلسات قبلی نیز مطالبی در مورد موقعیت جغرافیای و درگ در html ارائه کردیم. در ادامه فصل ، قصد داریم به موضوع آشنایی با ذخیره سازی وب در html یا آموزش web storage و نحوه استفاده از web storage ، بپردازیم.
تکنیک web storage (ذخیره سازی وب) ، از cookie ،بهتر است.
مرورگرهایی که از web storage پشتیبانی می کنند:
API | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
Web Storage | ۴٫۰ | ۸٫۰ | ۳٫۵ | ۴٫۰ | ۱۱٫۵ |
با web storage (ذخیره سازی وب)، برنامه های کاربردی وب می توانند داده ها را به صورت محلی در مرورگر کاربر ذخیره کنند.
تا قبل از ارائه HTML5 ، داده ها وبرنامه های کاربردی ، داخل cookies ها ،ذخیره می شدند.
اکنون web storage ، امن تر است.و مقدار زیادی از داده ها را بدون تاثیر بد بر عملکرد وب سایت، می توان به صورت محلی ذخیره کرد.
بر خلاف کوکی ها، حد ذخیره سازی بسیار بزرگتر است (حداقل ۵ مگابایت) و اطلاعات هرگز به سرور منتقل نمی شود.
web storage ، دو شی را بای دخیره سازی داده ها، فراهم می کند.
قبل از اینکه از web storage ، استفاده کنید ، ابتدا بررسی کنید که آیا مرورگر شما از localStorage و sessionStorage ، پشتیبانی می کند:
1 2 3 4 5 | if (typeof(Storage) !== "undefined") { // Code for localStorage/sessionStorage. } else { // Sorry! No Web Storage support.. } |
شیء localStorage داده ها را بدون تاریخ انقضا ذخیره می کند. این به این معنی است که ، وقتی مرورگر بسته می شود داده ها حذف نخواهد شد و روز، هفته یا سال بعد در دسترس خواهند بود.
مثال:
1 2 3 4 | // Store localStorage.setItem("lastname", "Smith"); // Retrieve document.getElementById("result").innerHTML = localStorage.getItem("lastname"); |
توضیح کد بالا:
همچنین می توان کد فوق را به صورت زیر نوشت :
1 2 3 4 | // Store localStorage.lastname = "Smith"; // Retrieve document.getElementById("result").innerHTML = localStorage.lastname; |
نحو حذف موارد نام خانوادگی localStorage به شرح زیر است:
1 | localStorage.removeItem("lastname"); |
نکته: ارزش های Name/value همیشه به عنوان رشته ذخیره می شود. به یاد داشته باشید که در صورت نیاز، آنها را به قالب دیگری تبدیل کنید!
مثال زیر تعداد دفعاتی که یک کاربر یک دکمه را کلیک کرده است را شمارش می کند.
در این کد رشته ارزش به یک عدد تبدیل می شود تا بتواند شمارنده را افزایش دهد:
1 2 3 4 5 6 7 | if (localStorage.clickcount) { localStorage.clickcount = Number(localStorage.clickcount) + 1; } else { localStorage.clickcount = 1; } document.getElementById("result").innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s)."; |
تفاوت sessionStorage با localStorage ، این است که داده ها در این شی با بسته شدن برگ مرورگر ، حذف خواهند شد.
مثال زیر شمارش تعداد دفعاتی که کاربر یک دکمه را در جلسه جاری کلیک کرده است را نشان می دهد:
1 2 3 4 5 6 7 | if (sessionStorage.clickcount) { sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1; } else { sessionStorage.clickcount = 1; } document.getElementById("result").innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s) in this session."; |
در این بخش از فصل جاری یکی دیگر از ویژگی های HTML5 که با کمک جاوا اسکریپت قابل پیاده سازی است را که ویژگی ذخیره سازی وب در html می باشد را نیز بررسی کردیم، در بخش بعدی به مباحث web worker ها خواهیم پرداخت.