دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۲۰
  • مهر

جلسه ۵۳ : ذخیره سازی وب در html

  • دسته‌بندی‌ها :
جلسه ۵۳ : ذخیره سازی وب در html
    • جزئیات
    • نوع محتواآموزش تصویری

      مقدمه

      با عرض سلام خدمت کاربران سایت پی وی لرن . در ادامه دوره آموزش کامل html ، مبحث کار با چند رسانه ای در html را بطور کامل ارائه کردیم. و با نحوه کار کردن با انواع چند رسانه ای و کار با پلاگین در html ، آشنا شدید. در حال حاضر ادامه مبحث API را دنبال می کنیم. درجلسات قبلی نیز مطالبی در مورد موقعیت جغرافیای و درگ در html ارائه کردیم. در ادامه فصل ، قصد داریم به موضوع  آشنایی با ذخیره سازی وب در html یا آموزش web storage و نحوه استفاده از web storage ، بپردازیم.

       

      ذخیره سازی وب در html

      ذخیره سازی وب در html

      آشنایی با ذخیره سازی وب در html

      تکنیک web storage (ذخیره سازی وب) ، از cookie ،بهتر است.

      مرورگرهایی که از web storage پشتیبانی می کنند:

      API ChromeInternet Explorer / Edge FirefoxSafari Opera
      Web Storage۴٫۰۸٫۰۳٫۵۴٫۰۱۱٫۵

      web storage (ذخیره سازی وب) چیست

      با  web storage (ذخیره سازی وب)، برنامه های کاربردی وب می توانند داده ها را به صورت محلی در مرورگر کاربر ذخیره کنند.

      تا قبل از ارائه HTML5 ، داده ها وبرنامه های کاربردی ، داخل cookies ها ،ذخیره می شدند.

      اکنون web storage ، امن تر است.و  مقدار زیادی از داده ها را بدون تاثیر بد بر عملکرد وب سایت، می توان به صورت محلی ذخیره کرد.

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

      بخش های  web storage

      web storage ، دو شی را بای دخیره سازی داده ها، فراهم می کند.

      • window.localStorage :اطلاعات ذخیره بدون تاریخ انقضا ، ذخیره می شود.
      • window.sessionStorage :ذخیره داده ها برای یک جلسه (داده ها از بین می روند زمانی که برگه مرورگر بسته شود).

      قبل از اینکه از web storage ، استفاده کنید ، ابتدا بررسی کنید که آیا مرورگر شما از localStorage و sessionStorage ، پشتیبانی می کند:

      مثال : 

      شی localStorage

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

      مثال:

      مثال :  تعریف localStorage
      خودتان امتحان کنید »

      توضیح کد بالا:

      • ابتدا یک localStorage با نام “name=”lastnameو مقدار “value=”Smithایجاد می شود.
      • مقدار “lastname” ر ابرمی گرداند و آن را در عنصری با ID با مقدار “result” قرار می دهد.

      همچنین می توان کد فوق را به صورت زیر نوشت :

      مثال : 

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

      مثال : 

      نکته: ارزش های Name/value همیشه به عنوان رشته ذخیره می شود. به یاد داشته باشید که در صورت نیاز، آنها را به قالب دیگری تبدیل کنید!

      مثال زیر تعداد دفعاتی که یک کاربر یک دکمه را کلیک کرده است را شمارش می کند.

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

      مثال : تعداد دفعات کلیک کاربران
      خودتان امتحان کنید »

      شی sessionStorage

      تفاوت sessionStorage با localStorage ، این است که داده ها در این شی با بسته شدن برگ مرورگر ، حذف خواهند شد.

      مثال زیر شمارش تعداد دفعاتی که کاربر یک دکمه را در جلسه جاری کلیک کرده است را نشان می دهد:

      مثال : شیء sessionStorage
      خودتان امتحان کنید »

      کلام آخر

      در این بخش از فصل جاری یکی دیگر از ویژگی های HTML5 که با کمک جاوا اسکریپت قابل پیاده سازی است را که ویژگی ذخیره سازی وب در html می باشد را نیز بررسی کردیم، در بخش بعدی به مباحث web worker ها خواهیم پرداخت.

      QR:  جلسه ۵۳ : ذخیره سازی وب در html
      به اشتراک بگذارید