استفاده از local storage در جاوااسکریپت 

ترجمه و تالیف : علی کاظمی
تاریخ انتشار : 29 اردیبهشت 99
خواندن در 2 دقیقه
دسته بندی ها : جاوا اسکریپت

در این مقاله راجب اینکه local storage چه چیزی هست؛ متدهایی که به وسیله آن‌ها می‌توانیم در local storage تغییراتی ایجاد کنیم و استفاده از local storage در جاوااسکریپت صحبت ‌می‌کنیم.

من در مورد این موضوع همیشه اطلاع داشتم اما در هیچ پروژه‌ای از آن استفاده نکردم. بنابراین تصمیم گرفتم یک برنامه یادداشت درست کنم که بتوانم در آن از این ابزار استفاده کنم و داده‌ها را دستکاری کنم، تصمیم گرفتم آن چیزی را که در این پروژه یاد گرفتم را با بقیه به اشتراک بگذارم. پس بیاید در ابتدا ببینیم که local storage چه چیزی هست؟

Local storage  چیست؟

Local Storage  یک مکان ذخیره‌سازی هست که در مرورگر کاربر وجود دارد که این امکان را به ما می‌دهد تا با جاوااسکریپت یک سری اطلاعات را ذخیره و استفاده کنیم. در واقع عملیات ثبت، خواندن، بروزرسانی و حذف (CRUD) را می‌توانیم با فضایی که در اختیار داریم انجام بدهیم. اطلاعاتی که در Local Storage ذخیره می‌شود دائمی هست. یعنی اگه کاربر تب مرورگر و یا حتی خود مرورگر را ببندد، این اطلاعات حذف نمی‌شوند.

نوع دیگری از ذخیره‌سازی اطلاعات درون session storage می‌باشد که بسیار شبیه local storage است با این تفاوت که در این نوع ذخیره‌سازی اطلاعات با بستن مرورگر پاک می‌شود.

متدهای local storage

به وسیله این متدها می‌توان اطلاعات درون local storage را دستکاری کرد. این متدها شامل:

  • setItem()
  • getItem()
  • removeItem()
  • clear()

بیاید در مورد هر کدام صحبت کنیم.

setItem()

این متد برای زمانی استفاده می‌شود که می‌خواهیم یک سری اطلاعات را درون Local Storage ثبت و یا اطلاعات قبلی را ویرایش کنیم. این متد دو پارامتر می‌گیرد. اولی، کلید آن مقداری هست که ثبت می‌شود یا ویرایش می‌شود. پارامتر دوم، شامل مقدار این کلید می‌باشد.

 به عنوان مثال اگر ما بخواهیم name را درون local storage ذخیره کنیم به صورت زیر عمل می‌کنیم.

localStorage.setItem('name', 'Sarah');

در مثال بالا name کلید می‌باشد و sarah مقدار ذخیره شده در آن است.

این مثال خیلی ساده بود. ما می‌توانیم یک مقدار پیچیده تر عمل کنیم. مثلا یک آبجکت درون Local Storage ذخیره کنیم. به‌عنوان مثال یادداشت‌های برنامه یادداشت درون local storage ذخیره کنیم. باید دقت داشته باشیم که درون Local Storage باید رشته ذخیره کنیم. پس قبل از اینکه آبجکت رو ذخیره کنیم، باید اون رو تبدیل به رشته کنیم. ما می‌توانیم از متد JSON.stringify() برای تبدیل ابجکت یا آرایه‌ها به رشته استفاده کنیم قبل از این‌ که این اطلاعات را از طریق setItem() درون local storage ذخیره کنیم.

const notes = [
        {  
            title: 'A note',
            text: 'First Note'
        },
        {
            title: 'Another note',
            text: 'Second Note'
        }
    ]

    localStorage.setItem('notes', JSON.stringify(notes))

getItem()

از این متد برای دسترسی به اطلاعات ذخیره شده درون local storage استفاده می‌شود. این متد یک ورودی می‌گیرد که کلید آن اطلاعاتی هست که ما مقدار آن را می‌‌خواهیم و آن مقدار را به صورت‌ string برای ما برمی‌گرداند.

const name = localStorage.getItem('name');
    console.log(name) // 'Sarah'

اگر ما بخواهیم که یادداشت‌های ذخیره شده را هم بگیریم باید از طریق همین متد اقدام می‌کنیم با این تفاوت که اگر ما اطلاعات خود را به صورت آرایه بخواهیم باید اول اطلاعات را از طریق متد JSON.parse() تبدیل کنیم وگرنه اطلاعات به صورت string خارج می‌شود.

    JSON.parse(localStorage.getItem('notes'))

removeItem()

از این متد برای پاک کردن اطلاعات از داخل local storage استفاده می‌شود.این متد در ورودی یک کلید دریافت می‌کند که اطلاعاتی که در درون آن کلید هست را پاک می‌کند اگر کلیدی با این نام پیدا نشود کاری نمی‌کند.

localStorage.removeItem('name')

    console.log(localStorage.getItem('name')) //null

Clear()

این متد تمام اطلاعات داخل local storage را پاک می‌کند و مقداری به عنوان ورودی دریافت نمی‌کند.

localStorage.clear()

تنظیم رویدادها برای ذخیره‌سازی

ما می‌توانیم از event listenerها برای نظارت روی ذخیره‌سازی در local storage استفاده کنید.

    // When local storage changes, execute the doSomething function
    window.addEventListener('storage', doSomething())

نکاتی که باید به خاطر داشته باشید : 

  • حداکثر فضایی که در اختیار ما قرار دارد ۵ مگ می‌باشد.
  • این فضا به راحتی از طریق مرورگر قابل دسترسی می‌باشد پس نباید اطلاعاتی که از حساسیت زیادی برخوردار هستند را در local storage ذخیره کنیم.
  • عملیات درون local storage به صورت هم‌زمان می‌باشد به این معنی است که کارها یکی پس از دیگری انجام می‌شود.

منبع