صفحه اصلی / html / اموزش ذخیره و نمایش اطلاعات با web storage در html5

اموزش ذخیره و نمایش اطلاعات با web storage در html5

اموزش ایجاد رابط کاربری API در html 5 / ذخیره و نمایش اطلاعات با web storage

 

با سلام خدمت شما بازدیدکنندگان گرامی مجله اینترنتی شماسافت در این پست از مبحث برنامه نویسی – Html5 قصد معرفی یک رابط کاربری حرفه ای (API) به نام Web Storage داریم. این رابط کاربری به شما اجازه میدهد به راحتی اطلاعات ذخیره و از انها استفاده کنید. پس باما در اموزش مبحث «اموزش ذخیره و نمایش اطلاعات با web storage در html5» همراه باشید

 

رابط کاربری Web Storage در Html5

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

 

 

شروع ذخیره و نمایش اطلاعات با web storage در html5

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

  1. SessionStorage : این نوع ذخیره سازی تا پایان عمر پنجره مرورگر داری ارزش می باشد.
  2. Local Storage : این نوع ذخیره سازی بعد از پایان عمر پنجره مرورگر هم دارای ارزش می باشد.

 

 

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

See the Pen Web Storage Exp by s,mohamamd hosein abedy (@shomasoft) on CodePen.

 

در این کد ابتدا یک اسکریپت را تعریف کردیم تا بتوانیم کارمان را شروع کنیم

سپس با استفاده از کد زیر مقدار دلخواهمان را دخیره سازی میکنیم.

بدین صورت مقدار دلخواه خود را به همراه یک نشانه مخصوص برای نمایش ان یعنی (id1) ذخیره کردیم.

اکنون برای نمایش اطلاعات از یک دکمه و یک فیلد به نام get که در یک فرم به نام f1 است استفاده میکنیم و یک متغیر هم برای نمایش اطلاعات به صورت زیر تعریف میکنیم.

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

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

 

امیدواریم از این اموزش استفاده کافی برده باشید.

 

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *