همه چیز درباره Local Storage در جاوا اسکریپت و ری‌اکت

حتما درباره localStorage مقالات زیادی خواندین یا ویدئوهای زیادی دیدین اما هنوز گیج باشید! بیایید عمیقتر بررسی کنیم.

لوکال استوریج (localStorage) چیست؟

لوکال استوریج یکی از سادهترین روشها برای ذخیره دادهها به صورت ماندگار در مرورگر است. این دادهها به شکل key-value ذخیره میشوند (همیشه به صورت رشته متنی) و حتی پس از بستن، رفرش یا باز کردن مجدد مرورگر باقی میمانند.

بنابراین لوکال استوریج به صورت گلوبال در مرورگر windows یک ویژگی داخلی شیء قابل دسترسی است.

مقایسه localStorage، sessionStorage, Cookies

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

سشن استوریج (sessionStorage): شبیه به لوکال استوریج است، اما فقط تا زمانی که تب باز باشد، داده را نگه میدارد.

کوکی: دادههای کمی را ذخیره میکنند و با هر درخواست HTTP ارسال میشوند.

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

نحوه استفاده از لوکال استوریج در جاوا اسکریپت

لوکال استوریج یگ API ساده برای ذخیره، دریافت و حذف دادهها فراهم میکند.

ذخیره داده

localStorage.setItem(&quotusername&quot, &quotJohnDoe&quot);

دریافت داده

const user = localStorage.getItem(&quotusername&quot);

console.log(user); // خروجی: JohnDoe

حذف یک داده خاص

localStorage.removeItem(&quotusername&quot);

پاک کردن تمام دادهها

localStorage.clear();

استفاده از لوکال استوریج در ریاکت

میخوام در این قسمت یه مثال خیلی کاربردی و ساده از لوکال استوریج بهتون نشون بدم، مثال برای ذخیره تم روشن/ تیره هست. (حتی میتونی کد رو در برنامه ویرایش کد خودت کپی کنی و راحت تست کنی).

import React, { useState, useEffect } from &quotreact&quot

function ThemeSwitcher() {

    const [theme, setTheme] = useState(localStorage.getItem(&quottheme&quot) || &quotlight&quot);

    useEffect(() => {

        localStorage.setItem(&quottheme&quot, theme);

    }, [theme]);

    const toggleTheme = () => {

        setTheme(theme === &quotlight&quot ? &quotdark&quot : &quotlight&quot);

    };

    return (

        <div style={{ background: theme === &quotlight&quot ? &quot#fff&quot : &quot#333&quot, color: theme === &quotlight&quot ? &quot#000&quot : &quot#fff&quot, padding: &quot20px&quot }}>

            <p>تم فعلی: {theme}</p>

            <button ={toggleTheme}>تغییر تم</button>

        </div>

    );

}

export default ThemeSwitcher;

توضیح کد: این کد تم انتخابی کاربر را در لوکال استوریج ذخیره میکند. اگر صفحه رفرش شود، تم همچنان باقی میماند.

اینم از خروجی کار.

چرا لوکال استوریج؟

لوکال استوریج به ما اجازه میدهد دادههایی که نیازی به ارسال به سرور ندارند، سریع و بهینه ذخیره کنیم. این موضوع به بهبود تجربه کاربری و کاهش فشار روی سرور کمک میکند.

چرا مهم است؟

• افزایش سرعت برنامه: نیازی به درخواستهای غیرضروری به سرور نیست.
• حفظ تنظیمات کاربر: مانند ذخیره تم، زبان یا آیتمهای سبد خرید
• کاهش بار سرور → چون اطلاعات در مرورگر ذخیره شدهاند و همیشه در دسترساند.

مزایای لوکال استوریج

• ماندگاری بالا → دادهها حتی بعد از بسته شدن مرورگر باقی میمانند.
• داشتن API ساده و راحت → متدهای setItem، getItem و removeItem برای مدیریت دادهها کافیاند.
• مناسب برای دادههای سبک → مناسب برای ذخیره رشتههای متنی و تنظیمات کاربر.
• بدون ارسال با هر درخواست HTTP → برخلاف کوکیها، حجم درخواستها را افزایش نمیدهد.

معایب و مشکلات امنیتی

• حجم ذخیرهسازی محدود → معمولاً فقط حدود ۵ مگابایت فضا دارد.
• تاریخ انقضا ندارد → دادهها تا زمانی که به صورت دستی حذف نشوند، باقی میمانند.
• امنیت پایین → در برابر حملات XSS آسیبپذیر است.
• نامناسب برای اطلاعات حساس → هرگز رمز عبور یا اطلاعات مهم کاربر را در localStorage ذخیره نکنید!

جمعبندی

لوکال استوریج یک ابزار قدرتمند برای ذخیره دادههای سمت کلاینت است که در جاوا اسکریپت و ریاکت کاربرد زیادی دارد. اما نباید از آن برای اطلاعات حساس استفاده کرد.

اگر نیاز به راهحلهای پیشرفتهتر دارید نگاه کردن به Redux Persist یا IndexedDB خالی از لطف نیست.

اینم از اولین مقاله من در وبسایت ویرگول. پذیرای انتقاد و نظرات شما هستم. :))