Web Storage در HTML5

بهنام نوبخت · ۱۴۰۵/۶/۲۸

تا اینجا بیشتر با قابلیت‌هایی آشنا شدیم که به ما کمک می‌کنند محتوای صفحه وب را ایجاد و مدیریت کنیم؛ اما در بسیاری از پروژه‌ها لازم است برخی اطلاعات را در مرورگر کاربر نگهداری کنیم. برای مثال ممکن است بخواهیم انتخاب زبان کاربر، حالت نمایش سایت، اطلاعات یک فرم موقت یا برخی تنظیمات رابط کاربری را ذخیره کنیم تا هنگام مراجعه دوباره به صفحه بتوانیم آن‌ها را بازیابی کنیم. Web Storage یکی از ساده‌ترین APIهای مرورگر برای انجام این کار است و دو مکانیزم اصلی به نام‌های localStorage و sessionStorage دارد. این دو API داده‌ها را به صورت جفت‌های کلید و مقدار در سمت کاربر نگهداری می‌کنند و برخلاف کوکی‌ها برای ذخیره داده‌های ساده سمت کلاینت بسیار راحت‌تر هستند. در این مقاله ابتدا مفهوم Web Storage را یاد می‌گیریم، سپس با localStorage و sessionStorage کار می‌کنیم و در ادامه با متدهای اصلی، ذخیره داده‌های پیچیده‌تر، حذف اطلاعات، محدودیت‌های ذخیره‌سازی و نکات امنیتی آشنا می‌شویم.

Web Storage چیست؟

Web Storage یک API مرورگر است که به JavaScript اجازه می‌دهد اطلاعات ساده را در فضای ذخیره‌سازی مربوط به وب‌سایت نگهداری کند.

دو روش اصلی Web Storage عبارت‌اند از:

localStorage
sessionStorage

هر دو از ساختاری مبتنی بر:

Key → Value

استفاده می‌کنند.

برای مثال:

name → Behnam
theme → dark
language → fa

در JavaScript می‌توانیم این اطلاعات را ذخیره کنیم و بعداً دوباره بخوانیم.

چرا به Web Storage نیاز داریم؟

فرض کنید یک سایت فروشگاهی داریم.

کاربر حالت نمایش سایت را روی:

حالت تاریک

قرار می‌دهد.

اگر این انتخاب فقط در متغیر JavaScript نگهداری شود، با Refresh کردن صفحه از بین می‌رود.

اما اگر آن را در localStorage ذخیره کنیم، می‌توانیم هنگام ورود دوباره کاربر به سایت آن را بازیابی کنیم.

مثلاً:

کاربر
  ↓
انتخاب حالت تاریک
  ↓
ذخیره در localStorage
  ↓
Refresh
  ↓
خواندن localStorage
  ↓
فعال شدن حالت تاریک

این یکی از کاربردهای بسیار رایج Web Storage است.

دو نوع Web Storage

Web Storage دو مکانیزم اصلی دارد:

localStorage
sessionStorage

اگرچه هر دو تقریباً با متدهای یکسانی کار می‌کنند، تفاوت مهمی در مدت نگهداری اطلاعات دارند.

localStorage چیست؟

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

مثلاً:

localStorage.setItem(
    "username",
    "Behnam"
);

حالا مقدار:

Behnam

در localStorage ذخیره شده است.

اگر صفحه را Refresh کنیم، اطلاعات همچنان وجود دارد.

در حالت معمول، داده‌های localStorage تا زمانی که حذف نشوند باقی می‌مانند؛ البته مرورگر و تنظیمات کاربر می‌توانند روی دسترسی و نگهداری داده‌ها اثر بگذارند.

sessionStorage چیست؟

sessionStorage نیز برای ذخیره اطلاعات استفاده می‌شود، اما طول عمر آن با یک Page Session مرتبط است.

برای مثال:

sessionStorage.setItem(
    "username",
    "Behnam"
);

اطلاعات در فضای session همان تب مرورگر ذخیره می‌شود.

با پایان یافتن Session صفحه، داده‌های آن از بین می‌روند. همچنین sessionStorage بین تب‌های مستقل مانند localStorage مشترک نیست.

تفاوت localStorage و sessionStorage

مهم‌ترین تفاوت را می‌توان این‌گونه خلاصه کرد:

ویژگی	localStorage	sessionStorage
ذخیره اطلاعات	بله	بله
باقی ماندن بعد از Refresh	بله	بله
باقی ماندن بعد از بسته شدن تب	معمولاً بله	خیر
مناسب برای تنظیمات دائمی	بله	معمولاً خیر
مناسب برای اطلاعات موقت یک تب	ممکن است	بله
API	تقریباً یکسان	تقریباً یکسان

localStorage بر اساس Origin ذخیره می‌شود، در حالی که sessionStorage علاوه بر Origin به تب یا browsing context نیز وابسته است.

Origin چیست؟

در بحث Web Storage اصطلاح مهمی به نام:

Origin

وجود دارد.

برای شروع کافی است بدانید که مرورگر اطلاعات Storage را برای هر وب‌سایت یا Origin به صورت جداگانه مدیریت می‌کند.

برای مثال:

https://example.com

فضای Storage خودش را دارد.

و:

https://another-site.com

فضای Storage جداگانه‌ای دارد.

بنابراین یک سایت نمی‌تواند به صورت عادی localStorage سایت دیگری را بخواند.

این جداسازی یکی از اصول مهم امنیت مرورگر است.

اولین استفاده از localStorage

ساده‌ترین روش ذخیره اطلاعات:

localStorage.setItem(
    "name",
    "Behnam"
);

است.

ساختار متد:

localStorage.setItem(
    "key",
    "value"
);

است.

مثلاً:

localStorage.setItem(
    "theme",
    "dark"
);

در اینجا:

key   = theme
value = dark

است.

دریافت اطلاعات با getItem

برای دریافت اطلاعات ذخیره‌شده از:

getItem()

استفاده می‌کنیم.

مثال:

const theme =
    localStorage.getItem("theme");

console.log(theme);

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

dark

باشد، نتیجه:

dark

خواهد بود.

مثال ساده ذخیره و دریافت

localStorage.setItem(
    "username",
    "Behnam"
);

const username =
    localStorage.getItem("username");

console.log(username);

ابتدا:

username → Behnam

ذخیره می‌شود.

سپس با:

getItem()

دوباره خوانده می‌شود.

اگر کلید وجود نداشته باشد چه می‌شود؟

فرض کنید چنین کلیدی وجود ندارد:

const result =
    localStorage.getItem("email");

در این حالت معمولاً نتیجه:

null

خواهد بود.

بنابراین می‌توانیم بررسی کنیم:

const email =
    localStorage.getItem("email");

if (email === null) {

    console.log(
        "ایمیل ذخیره نشده است."
    );

}

حذف یک مقدار با removeItem

اگر بخواهیم فقط یک مقدار را حذف کنیم، از:

removeItem()

استفاده می‌کنیم.

مثلاً:

localStorage.removeItem(
    "username"
);

حالا کلید:

username

حذف می‌شود.

حذف تمام اطلاعات با clear

اگر بخواهیم تمام داده‌های Storage مربوط به آن Storage را حذف کنیم:

localStorage.clear();

استفاده می‌کنیم.

مثلاً:

localStorage.setItem(
    "name",
    "Behnam"
);

localStorage.setItem(
    "theme",
    "dark"
);

localStorage.clear();

بعد از اجرای clear() اطلاعات ذخیره‌شده در آن فضای localStorage پاک می‌شوند.

بنابراین باید با احتیاط از آن استفاده کنیم.

بررسی تعداد آیتم‌ها با length

می‌توانیم تعداد آیتم‌های ذخیره‌شده را با:

localStorage.length

دریافت کنیم.

مثلاً:

console.log(
    localStorage.length
);

اگر سه کلید ذخیره شده باشد، نتیجه:

خواهد بود.

دریافت کلید با متد key

متد دیگری به نام:

key()

وجود دارد.

مثلاً:

const firstKey =
    localStorage.key(0);

console.log(firstKey);

عدد:

به اولین آیتم اشاره می‌کند.

البته در برنامه‌های معمولی بهتر است تا حد امکان با نام کلید مشخص و getItem() کار کنیم.

یک مثال کامل از متدهای اصلی

localStorage.setItem(
    "name",
    "Behnam"
);

localStorage.setItem(
    "theme",
    "dark"
);

console.log(
    localStorage.getItem("name")
);

console.log(
    localStorage.getItem("theme")
);

console.log(
    localStorage.length
);

localStorage.removeItem(
    "theme"
);

متدهای اصلی که تا اینجا یاد گرفتیم:

setItem()
getItem()
removeItem()
clear()
key()
length

localStorage فقط برای String است

یکی از نکات بسیار مهم Web Storage این است که داده‌ها به صورت رشته‌ای (String) ذخیره می‌شوند.

مثلاً:

localStorage.setItem(
    "age",
    25
);

هنگام ذخیره‌سازی مقدار به صورت رشته در Storage نگهداری می‌شود.

به همین دلیل هنگام دریافت اطلاعات باید به نوع داده توجه کنیم.

ذخیره عدد

مثلاً:

localStorage.setItem(
    "age",
    25
);

سپس:

const age =
    localStorage.getItem("age");

console.log(age);

مقدار دریافت‌شده یک String است.

بنابراین اگر واقعاً به عدد نیاز داشته باشیم، می‌توانیم آن را تبدیل کنیم:

const age =
    Number(
        localStorage.getItem("age")
    );

console.log(age + 5);

نتیجه:

خواهد بود.

مشکل ذخیره مستقیم Object

فرض کنید یک Object داریم:

const user = {

    name: "Behnam",

    age: 30

};

اگر مستقیماً آن را ذخیره کنیم:

localStorage.setItem(
    "user",
    user
);

این روش برای ذخیره ساختار Object مناسب نیست.

زیرا Web Storage داده‌ها را به صورت String نگهداری می‌کند.

برای ذخیره Object بهتر است از:

JSON.stringify()

استفاده کنیم.

JSON.stringify چیست؟

JSON.stringify() یک مقدار JavaScript مانند Object یا Array را به رشته JSON تبدیل می‌کند.

مثلاً:

const user = {

    name: "Behnam",

    age: 30

};

const json =
    JSON.stringify(user);

console.log(json);

نتیجه چیزی شبیه این خواهد بود:

{
    "name": "Behnam",
    "age": 30
}

البته خروجی واقعی JSON.stringify() یک String است.

ذخیره Object در localStorage

حالا می‌توانیم Object را به شکل صحیح ذخیره کنیم:

const user = {

    name: "Behnam",

    age: 30

};

localStorage.setItem(
    "user",
    JSON.stringify(user)
);

در این حالت Object ابتدا به JSON تبدیل می‌شود و سپس در Storage قرار می‌گیرد.

دریافت Object با JSON.parse

هنگام دریافت اطلاعات باید رشته JSON را دوباره به Object تبدیل کنیم.

برای این کار از:

JSON.parse()

استفاده می‌کنیم.

مثال:

const user =
    JSON.parse(
        localStorage.getItem("user")
    );

console.log(user.name);
console.log(user.age);

بنابراین الگوی معمول این است:

Object
   ↓
JSON.stringify()
   ↓
localStorage
   ↓
getItem()
   ↓
JSON.parse()
   ↓
Object

ذخیره Array

همین روش برای Array نیز کاربرد دارد.

مثلاً:

const products = [

    "Laptop",
    "Mouse",
    "Keyboard"

];

localStorage.setItem(
    "products",
    JSON.stringify(products)
);

برای دریافت:

const products =
    JSON.parse(
        localStorage.getItem("products")
    );

console.log(products);

ساخت یک Todo List ساده

حالا از Web Storage در یک مثال کاربردی استفاده کنیم.

فرض کنید می‌خواهیم لیستی از کارها را ذخیره کنیم:

const todos = [
    "یادگیری HTML",
    "یادگیری CSS",
    "یادگیری JavaScript"
];

می‌توانیم آن را ذخیره کنیم:

localStorage.setItem(
    "todos",
    JSON.stringify(todos)
);

بعداً:

const savedTodos =
    JSON.parse(
        localStorage.getItem("todos")
    );

console.log(savedTodos);

با این روش حتی بعد از Refresh صفحه نیز می‌توانیم اطلاعات را دوباره دریافت کنیم.

بررسی وجود اطلاعات قبل از JSON.parse

فرض کنید هنوز چیزی ذخیره نشده است.

اگر این کد را اجرا کنیم:

const user =
    JSON.parse(
        localStorage.getItem("user")
    );

ممکن است مقدار دریافت‌شده null باشد.

بهتر است ابتدا بررسی کنیم:

const savedUser =
    localStorage.getItem("user");

if (savedUser !== null) {

    const user =
        JSON.parse(savedUser);

    console.log(user);

}

این روش برای جلوگیری از خطا و مدیریت بهتر وضعیت برنامه مناسب‌تر است.

ساخت یک مثال تنظیمات کاربر

فرض کنید کاربر می‌تواند حالت نمایش سایت را انتخاب کند:

روشن
تاریک

HTML:

<button id="light">
    حالت روشن
</button>

<button id="dark">
    حالت تاریک
</button>

JavaScript:

document
    .getElementById("light")
    .addEventListener("click", function() {

        localStorage.setItem(
            "theme",
            "light"
        );

    });


document
    .getElementById("dark")
    .addEventListener("click", function() {

        localStorage.setItem(
            "theme",
            "dark"
        );

    });

حالا انتخاب کاربر در localStorage ذخیره می‌شود.

خواندن تنظیمات هنگام باز شدن صفحه

می‌توانیم هنگام اجرای صفحه مقدار ذخیره‌شده را بخوانیم:

const theme =
    localStorage.getItem("theme");

console.log(theme);

اگر مقدار:

dark

باشد، می‌توانیم کلاس مربوط به حالت تاریک را فعال کنیم.

مثلاً:

if (theme === "dark") {

    document.body.classList.add(
        "dark"
    );

}

در مقالات آینده که CSS را یاد می‌گیریم، می‌توانیم این مثال را بسیار حرفه‌ای‌تر کنیم.

sessionStorage در عمل

استفاده از sessionStorage تقریباً مشابه localStorage است.

مثلاً:

sessionStorage.setItem(
    "step",
    "2"
);

برای دریافت:

const step =
    sessionStorage.getItem("step");

console.log(step);

برای حذف:

sessionStorage.removeItem(
    "step"
);

و برای حذف همه اطلاعات:

sessionStorage.clear();

یک مثال کاربردی برای sessionStorage

فرض کنید یک فرم ثبت‌نام چند مرحله‌ای داریم:

مرحله 1
   ↓
مرحله 2
   ↓
مرحله 3

می‌توانیم شماره مرحله فعلی را در:

sessionStorage

ذخیره کنیم.

مثلاً:

sessionStorage.setItem(
    "currentStep",
    "2"
);

اگر کاربر صفحه را Refresh کند، می‌توانیم مرحله را دوباره بخوانیم:

const currentStep =
    sessionStorage.getItem(
        "currentStep"
    );

console.log(currentStep);

این یکی از نمونه‌های مناسب استفاده از sessionStorage است.

localStorage یا sessionStorage؟

برای انتخاب درست از این سؤال استفاده کنید:

آیا می‌خواهم اطلاعات بعد از پایان Session نیز باقی بماند؟

اگر جواب:

بله

باشد، localStorage می‌تواند گزینه مناسبی باشد.

اگر جواب:

خیر

باشد و اطلاعات فقط برای Session فعلی لازم باشد، sessionStorage می‌تواند مناسب‌تر باشد.

مثلاً:

نیاز	انتخاب مناسب
انتخاب تم سایت	localStorage
زبان انتخاب‌شده	localStorage
تنظیمات رابط کاربری	localStorage
مرحله فعلی فرم چندمرحله‌ای	sessionStorage
اطلاعات موقت یک تب	sessionStorage
داده‌ای که باید در مراجعه بعدی باقی بماند	localStorage

البته انتخاب نهایی به نیاز پروژه بستگی دارد.

Web Storage و Cookies چه تفاوتی دارند؟

ممکن است بپرسید:

اگر Cookie هم اطلاعات ذخیره می‌کند، چرا Web Storage داریم؟

تفاوت‌های مهمی وجود دارد.

Web Storage برای ذخیره‌سازی ساده سمت مرورگر طراحی شده است و API آن بسیار ساده است.

در مقابل، Cookie بخشی از سازوکار HTTP است و در شرایط معمول همراه درخواست‌های HTTP ارسال می‌شود.

به همین دلیل نباید هر داده‌ای را صرفاً به دلیل امکان ذخیره در Cookie قرار دهیم. MDN نیز برای داده‌هایی که صرفاً باید در مرورگر نگهداری شوند، Web Storage و فناوری‌های دیگر سمت کلاینت را از ارسال غیرضروری داده در Cookie متمایز می‌کند.

آیا Web Storage جای Database است؟

خیر.

Web Storage برای ذخیره داده‌های ساده سمت مرورگر مناسب است.

اما برای یک برنامه واقعی مانند:

فروشگاه اینترنتی
سامانه کاربران
سیستم مالی
سامانه مدیریت

معمولاً اطلاعات اصلی باید در سمت سرور و Database نگهداری شوند.

برای مثال:

Database
├── Users
├── Products
├── Orders
└── Payments

و Web Storage می‌تواند برای برخی تنظیمات یا داده‌های ساده سمت کلاینت استفاده شود.

آیا می‌توان اطلاعات حساس را در localStorage ذخیره کرد؟

باید بسیار محتاط باشیم.

localStorage محل مناسبی برای نگهداری اطلاعات بسیار حساس مانند:

رمز عبور
اطلاعات محرمانه
کلیدهای امنیتی حساس

نیست.

هر JavaScriptی که در همان Origin اجرا شود و به Storage دسترسی داشته باشد، می‌تواند داده‌های ذخیره‌شده را بخواند.

بنابراین نباید تصور کنیم:

localStorage = فضای امن برای Secrets

این تصور اشتباه است.

در طراحی سیستم‌های احراز هویت، نوع داده، تهدیدهای XSS، نحوه مدیریت Session و مکانیزم‌های امنیتی باید جداگانه بررسی شوند.

محدودیت حجم Web Storage

Web Storage برای ذخیره حجم بسیار زیادی از اطلاعات طراحی نشده است.

مقدار دقیق فضای قابل استفاده می‌تواند به مرورگر و شرایط آن بستگی داشته باشد.

MDN در مستندات فعلی Web Storage حداکثر حدود 10 MiB را به صورت مجموع معمول برای Web Storage ذکر می‌کند که شامل حدود 5 MiB برای localStorage و 5 MiB برای sessionStorage به ازای هر Origin است. این مقدار را نباید به عنوان یک عدد مطلق برای تمام شرایط و همه مرورگرها در نظر گرفت.

بنابراین:

Web Storage
      ↓
داده‌های ساده و کم‌حجم

و نه:

Web Storage
      ↓
Database بزرگ

QuotaExceededError

اگر فضای قابل استفاده Storage پر شود، عملیات ذخیره‌سازی می‌تواند با خطایی مانند:

QuotaExceededError

مواجه شود.

بنابراین در برنامه‌های مهم بهتر است عملیات ذخیره‌سازی را با مدیریت خطا انجام دهیم.

مثلاً:

try {

    localStorage.setItem(
        "name",
        "Behnam"
    );

} catch (error) {

    console.log(
        "ذخیره اطلاعات با مشکل مواجه شد."
    );

}

این موضوع مخصوصاً زمانی اهمیت دارد که Storage ممکن است توسط تنظیمات مرورگر محدود شده باشد یا فضای آن پر شده باشد.

Web Storage همزمان اجرا می‌شود

یکی دیگر از نکات فنی این API این است که عملیات localStorage و sessionStorage به صورت synchronous انجام می‌شوند.

یعنی اجرای عملیات خواندن یا نوشتن می‌تواند اجرای JavaScript را تا پایان آن عملیات متوقف کند.

برای داده‌های کوچک این موضوع معمولاً مشکل بزرگی ایجاد نمی‌کند، اما استفاده بسیار سنگین و مکرر از Web Storage برای داده‌های بزرگ می‌تواند انتخاب مناسبی نباشد.

رویداد `storage`

Web Storage یک Event به نام:

storage

دارد.

این Event زمانی می‌تواند برای اطلاع از تغییرات Storage در Contextهای دیگر همان Origin مورد استفاده قرار گیرد.

مثلاً:

window.addEventListener(
    "storage",
    function(event) {

        console.log(event);

    }
);

اطلاعاتی مانند:

event.key
event.oldValue
event.newValue

می‌توانند اطلاعات مربوط به تغییر را در اختیار ما قرار دهند.

یک مثال ساده Storage Event

فرض کنید در یک تب مقدار زیر را تغییر می‌دهیم:

localStorage.setItem(
    "theme",
    "dark"
);

در یک Context دیگر از همان Origin می‌توانیم تغییر Storage را بررسی کنیم:

window.addEventListener(
    "storage",
    function(event) {

        console.log(
            "Key:",
            event.key
        );

        console.log(
            "Old:",
            event.oldValue
        );

        console.log(
            "New:",
            event.newValue
        );

    }
);

این قابلیت می‌تواند برای هماهنگ کردن برخی وضعیت‌ها بین تب‌های مختلف کاربرد داشته باشد.

یک مثال کوچک چندتب‌ای

فرض کنید سایت در دو تب باز است:

Tab 1
Tab 2

در Tab 1:

localStorage.setItem(
    "theme",
    "dark"
);

در Tab 2 می‌توانیم تغییر Storage را با Event دریافت کنیم:

window.addEventListener(
    "storage",
    function(event) {

        if (event.key === "theme") {

            console.log(
                "Theme changed to:",
                event.newValue
            );

        }

    }
);

این قابلیت در برنامه‌هایی که چند تب همزمان دارند می‌تواند مفید باشد.

یک پروژه کوچک Web Storage

حالا یک پروژه کوچک بسازیم که نام کاربر را ذخیره کند.

HTML

<!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Web Storage</title>

</head>

<body>

    <h1>
        ذخیره نام کاربر
    </h1>

    <input
        id="nameInput"
        type="text"
        placeholder="نام خود را وارد کنید">

    <button id="saveButton">
        ذخیره
    </button>

    <button id="removeButton">
        حذف
    </button>

    <p id="result"></p>

    <script>

        const nameInput =
            document.getElementById(
                "nameInput"
            );

        const result =
            document.getElementById(
                "result"
            );


        document
            .getElementById("saveButton")
            .addEventListener(
                "click",
                function() {

                    const name =
                        nameInput.value;

                    localStorage.setItem(
                        "username",
                        name
                    );

                    result.textContent =
                        "نام شما ذخیره شد.";

                }
            );


        document
            .getElementById("removeButton")
            .addEventListener(
                "click",
                function() {

                    localStorage.removeItem(
                        "username"
                    );

                    result.textContent =
                        "نام حذف شد.";

                }
            );


        const savedName =
            localStorage.getItem(
                "username"
            );


        if (savedName) {

            nameInput.value =
                savedName;

            result.textContent =
                `نام ذخیره‌شده: ${savedName}`;

        }

    </script>

</body>

</html>

در این پروژه:

Input
   ↓
localStorage.setItem()
   ↓
Storage
   ↓
getItem()
   ↓
نمایش اطلاعات

را پیاده‌سازی کردیم.

یک پروژه کوچک با Object

حالا یک User Object ذخیره کنیم.

const user = {

    firstName: "Behnam",

    lastName: "Nowbakht",

    theme: "dark"

};

localStorage.setItem(
    "user",
    JSON.stringify(user)
);

برای دریافت:

const savedUser =
    localStorage.getItem("user");

if (savedUser) {

    const user =
        JSON.parse(savedUser);

    console.log(
        user.firstName
    );

    console.log(
        user.theme
    );

}

این الگو در پروژه‌های واقعی بسیار رایج است.

اشتباهات رایج در Web Storage

اشتباه اول: تصور اینکه همه چیز Number است

وقتی داده‌ای را از Storage می‌خوانیم، باید توجه کنیم که مقدار ذخیره‌شده در قالب String قرار دارد.

بنابراین:

const age =
    localStorage.getItem("age");

را نباید بدون توجه به نوع داده، یک Number واقعی فرض کنیم.

اشتباه دوم: ذخیره مستقیم Object

این کار:

localStorage.setItem(
    "user",
    user
);

برای ذخیره ساختار Object مناسب نیست.

بهتر است:

JSON.stringify(user)

استفاده کنیم.

اشتباه سوم: JSON.parse بدون بررسی null

این کد:

JSON.parse(
    localStorage.getItem("user")
);

در صورتی که داده وجود نداشته باشد می‌تواند باعث منطق نامناسب یا خطاهای بعدی در برنامه شود.

بهتر است ابتدا وجود مقدار را بررسی کنیم.

اشتباه چهارم: استفاده از localStorage برای داده‌های بسیار بزرگ

Web Storage برای داده‌های کوچک و ساده طراحی شده است.

برای داده‌های بزرگ‌تر یا ساختارهای پیچیده‌تر، فناوری‌هایی مانند:

IndexedDB

گزینه‌های مناسب‌تری هستند.

اشتباه پنجم: ذخیره اطلاعات حساس

نباید اطلاعات حساس را بدون بررسی دقیق معماری امنیتی در localStorage قرار دهیم.

اشتباه ششم: استفاده بی‌دلیل از clear()

این کد:

localStorage.clear();

تمام داده‌های localStorage مربوط به Origin را پاک می‌کند.

پس اگر فقط می‌خواهیم یک مقدار حذف شود، بهتر است از:

removeItem()

استفاده کنیم.

تمرین عملی اول

یک صفحه ایجاد کنید که یک Input و دو دکمه داشته باشد:

نام:
[____________]

[ذخیره]
[نمایش]

با کلیک روی ذخیره:

localStorage.setItem()

استفاده کنید.

با کلیک روی نمایش:

localStorage.getItem()

را اجرا کنید.

تمرین عملی دوم

یک سیستم ساده برای انتخاب رنگ بسازید.

مثلاً کاربر بتواند بین:

قرمز
سبز
آبی

انتخاب کند.

انتخاب او را در:

localStorage

ذخیره کنید.

بعد از Refresh صفحه، رنگ قبلی را بازیابی کنید.

تمرین عملی سوم

یک Object مانند زیر ایجاد کنید:

const user = {

    name: "Ali",

    age: 25,

    city: "Tehran"

};

آن را با:

JSON.stringify()

در localStorage ذخیره کنید.

سپس آن را با:

JSON.parse()

دوباره به Object تبدیل کنید.

تمرین عملی چهارم

یک فرم چندمرحله‌ای فرضی ایجاد کنید.

شماره مرحله فعلی را با:

sessionStorage

ذخیره کنید.

مثلاً:

مرحله 1
مرحله 2
مرحله 3

با Refresh صفحه بررسی کنید که مرحله فعلی همچنان قابل بازیابی باشد.

چالش

یک صفحه با عنوان:

تنظیمات کاربر

بسازید.

صفحه باید شامل موارد زیر باشد:

نام کاربر
انتخاب تم روشن یا تاریک
انتخاب زبان
دکمه ذخیره
دکمه حذف تنظیمات

اطلاعات را به صورت یک Object ذخیره کنید:

const settings = {

    username: "...",

    theme: "...",

    language: "..."

};

سپس:

JSON.stringify()

برای ذخیره و:

JSON.parse()

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

بعد از Refresh صفحه، تنظیمات قبلی باید دوباره نمایش داده شوند.

نکات مهم این مقاله

در این مقاله یاد گرفتیم:

Web Storage برای ذخیره داده‌های ساده در مرورگر استفاده می‌شود.
دو نوع اصلی Web Storage عبارت‌اند از localStorage و sessionStorage.
localStorage معمولاً داده را بعد از بسته شدن مرورگر نیز نگه می‌دارد.
sessionStorage به Session یک تب وابسته است.
setItem() برای ذخیره اطلاعات است.
getItem() برای دریافت اطلاعات است.
removeItem() یک آیتم را حذف می‌کند.
clear() تمام آیتم‌های آن Storage را حذف می‌کند.
length تعداد آیتم‌ها را مشخص می‌کند.
key() برای دریافت کلید یک آیتم استفاده می‌شود.
Web Storage داده‌ها را به صورت String نگهداری می‌کند.
برای ذخیره Object و Array می‌توان از JSON.stringify() استفاده کرد.
برای تبدیل دوباره JSON به Object یا Array می‌توان از JSON.parse() استفاده کرد.
storage Event می‌تواند برای اطلاع از تغییرات Storage در Contextهای دیگر همان Origin استفاده شود.
Web Storage برای داده‌های ساده و نسبتاً کم‌حجم مناسب است.
نباید اطلاعات حساس را بدون بررسی امنیتی در localStorage قرار داد.
Web Storage جایگزین Database نیست.
برای داده‌های بزرگ‌تر و ساختارهای پیچیده‌تر، فناوری‌هایی مانند IndexedDB می‌توانند مناسب‌تر باشند.

جمع‌بندی

Web Storage یکی از ساده‌ترین قابلیت‌های مرورگر برای نگهداری اطلاعات سمت کاربر است و در بسیاری از پروژه‌های وب می‌تواند برای ذخیره تنظیمات و داده‌های ساده بسیار کاربردی باشد. دو ابزار اصلی آن یعنی localStorage و sessionStorage از متدهای مشابهی مانند setItem()، getItem()، removeItem() و clear() استفاده می‌کنند، اما تفاوت اصلی آن‌ها در طول عمر و محدوده Session اطلاعات است.

همچنین یاد گرفتیم که Web Storage داده‌ها را به صورت String نگهداری می‌کند و برای ذخیره Object یا Array معمولاً باید از JSON.stringify() و هنگام بازیابی از JSON.parse() استفاده کنیم. در کنار این موارد، با storage Event، محدودیت حجم، مدیریت خطا و نکات امنیتی نیز آشنا شدیم.

۰۰

نظرات

هنوز نظری ثبت نشده است.

Web Storage در HTML5

Web Storage چیست؟

چرا به Web Storage نیاز داریم؟

دو نوع Web Storage

localStorage چیست؟

sessionStorage چیست؟

تفاوت localStorage و sessionStorage

Origin چیست؟

اولین استفاده از localStorage

دریافت اطلاعات با getItem

مثال ساده ذخیره و دریافت

اگر کلید وجود نداشته باشد چه می‌شود؟

حذف یک مقدار با removeItem

حذف تمام اطلاعات با clear

بررسی تعداد آیتم‌ها با length

دریافت کلید با متد key

یک مثال کامل از متدهای اصلی

localStorage فقط برای String است

ذخیره عدد

مشکل ذخیره مستقیم Object

JSON.stringify چیست؟

ذخیره Object در localStorage

دریافت Object با JSON.parse

ذخیره Array

ساخت یک Todo List ساده

بررسی وجود اطلاعات قبل از JSON.parse

ساخت یک مثال تنظیمات کاربر

خواندن تنظیمات هنگام باز شدن صفحه

sessionStorage در عمل

یک مثال کاربردی برای sessionStorage

localStorage یا sessionStorage؟

Web Storage و Cookies چه تفاوتی دارند؟

آیا Web Storage جای Database است؟

آیا می‌توان اطلاعات حساس را در localStorage ذخیره کرد؟

محدودیت حجم Web Storage

QuotaExceededError

Web Storage همزمان اجرا می‌شود

رویداد storage

یک مثال ساده Storage Event

یک مثال کوچک چندتب‌ای

یک پروژه کوچک Web Storage

HTML

یک پروژه کوچک با Object

اشتباهات رایج در Web Storage

اشتباه اول: تصور اینکه همه چیز Number است

اشتباه دوم: ذخیره مستقیم Object

اشتباه سوم: JSON.parse بدون بررسی null

اشتباه چهارم: استفاده از localStorage برای داده‌های بسیار بزرگ

اشتباه پنجم: ذخیره اطلاعات حساس

اشتباه ششم: استفاده بی‌دلیل از clear()

تمرین عملی اول

تمرین عملی دوم

تمرین عملی سوم

تمرین عملی چهارم

چالش

نکات مهم این مقاله

جمع‌بندی

نظرات

رویداد `storage`