local storage در سرزمین React

انباره محلی (local storage) این امکان را به ما می‌دهد که در مرورگر خود، داده‌هایی را با مدت زمان نامحدود ذخیره کنیم. نحوه کار local storage مشابه کوکی‌ها است اما برخلاف کوکی، سرور را مشغول نمی‌کند درنتیجه باعث کاهش سرعت نمی‌شود. همچنین فضای بیشتری را در اختیار ما قرار می‌دهد. کوکی‌ها تا ۴ KB را پشتیبانی می‌کنند در حالیکه local storage تا تا ۱۰ MB را پشتیبانی می‌کند.

برای کار با  local storage  می‌توانیم از متد‌های زیر استفاده کنیم:

// setter
۱- localStorage.setItem('myData', data);
 
// getter
۲- localStorage.getItem('myData');
 
// remove
۳- localStorage.removeItem('myData');
 
// remove all
۴- localStorage.clear();

۱- توسط متد اول می‌توانیم داده موردنظر را به local storage  توسط یک نام و مقدار اضافه کنیم

۲- توسط متد دوم می‌توانیم داده موردنظر را از local storage  توسط یک نام  بگیریم

۳- توسط متد سوم می‌توانیم داده موردنظر را از local storage  توسط یک نام  پاک کنیم

۴- توسط متد چهارم می‌توانیم تمامی داده‌های local storage  را پاک کنیم

استفاده از local storage در ری‌اکت

در این مثال یک فانکشنال کامپوننت داریم که مقدار اینپوت را با استفاده از هوک‌های ری‌اکت مدیریت می‌کنیم و هر مقداری که در اینپوت وارد شود در پاراگراف زیر آن نمایش داده می‌شود:

import React from 'react';
 
const App = () => {

    const [value, setValue] = React.useState('');
    
    const onChange = event => setValue(event.target.value);

    return (
        <div className="local-strorage-test">

            <h1>Using Local Storage in React</h1>
            <input value={value} type="text" onChange={onChange} placeholder="please type yourname" />
            <p> <strong>your name:</strong> {value} </p>

        </div>
    );
};
 
export default App;

در کد بالا هر مقداری در اینپوت تایپ شود در پاراگراف زیر آن نمایش داده می‌شود اما به محض اینکه مرورگر را ببندید مقدار از بین می‌رود. برای نگهداری از این مقدار می‌توانیم از local storage استفاده کنیم

import React from 'react';
 
const App = () => {

    const [value, setValue] = React.useState('');
    

    const onChange = (event) => {
        localStorage.setItem('username', value);
        setValue(event.target.value);
    }

    return (
        <div className="local-strorage-test">

            <h1>Using Local Storage in React</h1>
            <input 
                  value={value} 
                  type="text" 
                  onChange={onChange} 
                  placeholder="please type yourname" />
            <p> <strong>your name:</strong> {value} </p>

        </div>
    );
};
 
export default App;

البته استفاده از local storage در فانکشنال کامپوننت‌ها ممکن است باعث ایجاد مشکلات جانبی شود لذا بهتر آن را در useEffect استفاده کنیم.هربار که مقدار اینپوت تغییر کند useEffect اجرا می‌شود و آن مقدار را در local storage ذخیره می‌کند.

در قدم بعدی می‌خواهیم مقدار ذخیره شده را بگیریم:

import React from 'react';
 
const App = () => {

    const [value, setValue] = React.useState(localStorage.getItem('username') || '');
    
    React.useEffect(() => {
        localStorage.setItem('username', value);
    }, [value]);

    const onChange = event => setValue(event.target.value);

    return (
        <div className="local-strorage-test">

            <h1>Using Local Storage in React</h1>
            <input 
                  value={value} 
                  type="text" 
                  onChange={onChange} 
                  placeholder="please type yourname" />
            <p> <strong>your name:</strong> {value} </p>

        </div>
    );
};
 
export default App;

در تصویر زیر مقدار دخیره شده در local storage را می‌بینید. همانطور که مشاهده می‌کنید در تب Application  در Chrome Developer Tools می‌توانید مقادیر local storage را ببینید:

در باکس زیر نمونه پیاده شده مثال بالا راا می‌بینید:

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

توجه داشته باشید local storage جایگزینی برای دیتابیس سمت سرور نیست چون داده‌ها فقط در مرورگر دخیره می‌شوند