LocalStorage

از دانشنامه تخصصی کامپیوتر ایران
پرش به: ناوبری، جستجو

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

چگونگی خواندن و نوشتن در LocalStorage :[ویرایش]

<source lang="javascript"> // Store value on the browser beyond the duration of the session localStorage.setItem('key', 'value');

// Retrieve value (works even after closing and re-opening the browser) alert(localStorage.getItem('key'));


localStorage.setItem("name", "aiapir.com"); document.write(localStorage.getItem("name")); </source>

localStorage خصوصیت جدیدی است که به شیء window در جاوا اسکریپت اضافه شده است که اطلاعات به صورت یک جفت key/value در آن ذخیره می شود. این اطلاعات بر اساس دامنه مورد استفاده ذخیره می شوند، و در کلیه صفحات وبسایت موجود بر روی همان دامنه (ساب دومین یک دامنه مجزا محسوب می شود) قابل دسترس می باشد، اما از یک دامنه دیگر خیر.

مثال <source lang="html5"> <body>

   <form method="post" id="commentForm">
       <label for="name">
           نام:</label>
       <input type="text" id="name" name="name" />
       
<label for="email"> ایمیل:</label> <input type="text" id="email" name="email" />
<label for="body"> یادداشت:</label>
<textarea rows="6" cols="27" name="body"> </textarea>
<input type="submit" value="ثبت" style="float: left" />
   </form>

</body> </source>

برای ثبت اطلاعات از جی کوئری استفاده شده است: <source lang="javascript"> <script type="text/javascript">

       $(function () {
           if (window['localStorage'] != null) {
               if (localStorage.length > 0) {
                   var data = localStorage.getItem("commnent_userSpec");
                   if (data != null) {
                       var userSpec = JSON.parse(data);

                       $("#name").val(userSpec.name);
                       $("#email").val(userSpec.email);
                   }
               }

               $("#commentForm").submit(function () {
                   var userSpec =
                   {
                       name: $("#name").val(),
                       email: $("#email").val()
                   };
                   try {
                       localStorage.setItem("commnent_userSpec", JSON.stringify(userSpec));
                   }
                   catch (e) {
                       if (e == QUOTA_EXCEEDED_ERR) {
                           alert('Quota exceeded!');
                       }
                   }
               });
           }
       });

</script> </source>

دسترسی به داده های ذخیره شده در LocalStorage[ویرایش]

<source lang="javascript"> var output = "LOCALSTORAGE DATA:\n------------------------------------\n"; if (localStorage) {

   if (localStorage.length) {
      for (var i = 0; i < localStorage.length; i++) {
          output += localStorage.key(i) + ': ' + localStorage.getItem(localStorage.key(i)) + '\n';
      }
   } else {
      output += 'There is no data stored for this domain.';
   }

} else {

   output += 'Your browser does not support local storage.'

} alert(output); </source>

در ابتدای متد جهت تعیین اینکه مرورگر مورد استفاده از localStorage پشتیبانی می کند یا خیر مقدار window['localStorage'] را چک می کنیم. localStorage در Firefox 3.5+، Chrome 4+ و Safari 4+ پشتیبانی می شود.

توضیح درباره نوع داده ی ذخیره شده در Local Storage[ویرایش]

<source lang="javascript"> // Store an object instead of a string localStorage.setItem('key', {name: 'value'}); alert(typeof localStorage.getItem('key')); // string

// Store an integer instead of a string localStorage.setItem('key', 1); alert(typeof localStorage.getItem('key')); // string

// Store an object using JSON localStorage.setItem('key', JSON.stringify({name: 'value'})); alert(JSON.parse(localStorage.getItem('key')).name); // value </source>

همانطور که پیش تر ذکر شد، مقادیر در localStorage به صورت key/value pair ذخیره می شوند و مقدار value باید از نوع رشته باشد. بنابراین هنگام دخیره و بازیابی یک عدد، در صورت نیاز به نوع عددی لازم است از متدهای parseInt یا parseFloat استفاده کنیم. در این مثال نیز لازم است ابتدا object ساخته شده به صورت یک رشته Json درآید و سپس ذخیره شود، به این منظور از متد stringify خصوصیت JSON استفاده شده است: سه متد دیگر نیز وجود دارد که در جای خود می تواند مفید باشد:

localStorage.key(index): متد key با دریافت یک index کلید آیتم دخیره شده در آن ایندکس را بر میگرداند. به طور مثال Key(0) کلید آیتم شماره صفر را می دهد.

localStorage.removeItem(key): از نام آن مشخص است، آیتم مورد نظر را حذف می کند.

localStorage.clear(): کلیه آیتم های موجود در فضای storage را حذف می کند.

همچنین برای ذخیره و بازیابی مقادیر از localStorage می توانید از شکل آرایه ای آن هم استفاده کنید:

<source lang="javascript"> localStorage["key"] = "value"; var value = localStorage["key"]; </source>


منبع http://www.irpcn.com/web/local-storage-html5.html

http://en.wikipedia.org/wiki/LocalStorage


Crystal Clear app kedit.png این یک نوشتار خُرد است، با گسترش آن به دانشنامه آیاپیر کمک کنید.

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