سرور مجازی NVMe

ذخیره داده ها در مرورگر با LocalStorage در روزهای اولیه وب، ماندگاری داده ها فقط با یک سرور امکان پذیر بود. امروزه با استفاده از LocalStorage می توانیم داده ها را ذخیره کنیم روی کلاینت هایی مانند مرورگرها و برنامه های تلفن همراه بدون برقراری ارتباط با یک برنامه پشتیبان. در این مقاله به روش ذخیره سازی داده ها توسط توسعه دهندگان می پردازیم روی…

JavaScript (JS)برنامه نویسی

توسط مهران در بهمن ۲, ۱۴۰۲

سرفصلهای مطلب

زمان لازم برای مطالعه: 6 دقیقه

معرفی

در روزهای اولیه وب، ماندگاری داده ها تنها با یک سرور امکان پذیر بود. امروزه با استفاده از LocalStorage می توانیم داده ها را ذخیره کنیم روی کلاینت هایی مانند مرورگرها و برنامه های تلفن همراه بدون برقراری ارتباط با یک برنامه پشتیبان.

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

ذخیره داده ها در مرورگر با کوکی ها

کوکی ها داده های متنی ذخیره شده در مشتری هستند. آنها به طور سنتی توسط سرور تنظیم می شوند، با این حال، می توانند با کد جاوا اسکریپت در مرورگر نیز ایجاد شوند. داده های موجود در کوکی ها به صورت جفت رشته های کلید/مقدار ذخیره می شوند.

وقتی درخواست HTTP انجام می شود، همه کوکی ها به سرور ارسال می شوند. کوکی هایی که با جاوا اسکریپت می سازید نیز در صورت درخواست HTTP به سرور ارسال می شود. این بدان معنی است که برنامه سرور می تواند به طور ناخواسته یک کوکی را تغییر دهد و باعث می شود برنامه مشتری شما رفتار غیرمنتظره ای داشته باشد.

با کوکی ها، فقط می توانید حداکثر 4 کیلوبایت داده ذخیره کنید روی مشتری. برای برنامه های کاربردی مدرن، این ممکن است کافی نباشد.

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

LocalStorage چیست؟

LocalStorage یک ذخیره اطلاعات کلید/مقدار است که در دسترس است روی مرورگر یک کاربر مانند کوکی ها، LocalStorage فقط می تواند داده های رشته ای را برای کلیدها و مقادیر خود ذخیره کند. دیتا استور فقط برای جاوا اسکریپت در آن دامنه قابل دسترسی است.

توجه داشته باشید: هر دامنه به داده LocalStorage خود دسترسی دارد. به عنوان مثال، LocalStorage استفاده شده توسط https://www.rasanegar.com جدا از LocalStorage استفاده شده توسط https://www.reddit.com.

زیر دامنه ها و پروتکل های مختلف HTTP (HTTP و HTTPS) همگی دارای داده های مستقل هستند. به عنوان مثال، LocalStorage استفاده شده توسط https://my.example.com کاملا جدا از https://example.com. به همین ترتیب، https://twitter.comLocalStorage جدا از http://twitter.com.

وجود LocalStorage در دسترس در هر دامنه از میزبانی جاوا اسکریپت مخرب جلوگیری می کند روی سایر وب سایت ها از دستکاری یا خواندن داده های مشتری ما که توسط دامنه ما استفاده می شود.

هر دامنه می تواند تا 5 مگابایت داده را در LocalStorage ذخیره کند. همچنین، هنگامی که درخواست HTTP انجام می شود، داده های ما به سرور ارسال نمی شود.

داده ها در LocalStorage زمان انقضا ندارند. می توان آن را از طریق جاوا اسکریپت یا با پاک کردن کش مرورگر حذف کرد.

اکنون که می دانیم LocalStorage چیست، بیایید از API آن برای مدیریت داده ها در مرورگر استفاده کنیم.

روش استفاده از LocalStorage

می توانیم از روش های زیر استفاده کنیم روی جهانی localStorage شیء برای مدیریت داده های سمت سرویس گیرنده:

روش	شرح
`setItem()`	کلید/مقدار را در LocalStorage اضافه کنید
`getItem()`	یک مقدار از LocalStorage دریافت کنید
`removeItem()`	مورد را با کلید آن حذف کنید
`clear()`	همه موارد را از LocalStorage حذف کنید
`key()`	کلید یک مورد را از LocalStorage دریافت کنید

پیشنهاد می‌کنیم بخوانید: در Vue با اجزای قابل استفاده مجدد به بالا بروید تا تجربه کاربر را بهبود ببخشید روی هر وب سایتی با محتوای زیاد روی در صفحات وب آن، برای توسعه دهندگان فرانت اند معمول است که یک عملکرد اسکرول به بالا را از طریق یک دکمه پیاده سازی کنند تا کارها برای کاربران لذت بخش تر و راحت تر شود. در حالی که کاربران می توانند از دستور + فلش بالا استفاده کنند روی آ...

setItem()

استفاده کنید setItem() عملکرد ذخیره یک آیتم در LocalStorage. این تابع یک کلید را به عنوان آرگومان اول و یک مقدار را به عنوان آرگومان دوم می گیرد. همانطور که قبلا ذکر شد، هر دو باید رشته باشند.

در مرورگر شما console بیایید یک مورد به ما اضافه کنیم localStorage:

localStorage.setItem("tech", "JavaScript");

getItem()

استفاده کنید getItem() عملکردی برای بازیابی داده ها از LocalStorage. این تابع کلیدی را که هنگام ذخیره داده ها استفاده شده است را به عنوان آرگومان می گیرد.

در شما console، بیایید بازیابی کنیم و print مقداری که قبلا با آن ذخیره شده بود setItem():

let techStack = localStorage.getItem("tech");
console.log(techStack);

شما console باید print “جاوا اسکریپت”.

removeItem()

استفاده کنید removeItem() عملکرد حذف یک مورد از LocalStorage. شما باید کلید موردی را که می خواهید حذف کنید به عنوان آرگومان ارائه دهید.

این را در خود امتحان کنید console برای حذف داده های ذخیره شده با setItem():

localStorage.removeItem("tech");

برای تأیید اینکه حذف شده است، یک بار دیگر آن را بازیابی کنید:

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

این console خروجی “تهی” را به عنوان getItem() برمی گرداند null هر زمان که نتواند یک مورد را بازیابی کند.

واضح ()

برای حذف تمام داده های ذخیره شده در LocalStorage، از clear() تابع:

localStorage.clear();

کلید ()

این key() تابع به ما این امکان را می دهد که کلید یک آیتم ذخیره شده در LocalStorage را با نمایه آن بازیابی کنیم. مرورگر برای هر موردی که به LocalStorage اضافه می شود، یک شاخص عدد صحیح ایجاد می کند.

از آنجایی که ما این شاخص را تولید نمی کنیم، نباید از ایندکس برای بازیابی مستقیم کلیدها استفاده کنیم. با این حال، ما می توانیم از این تابع برای دریافت تمام کلیدهای ذخیره شده در LocalStorage استفاده کنیم:

for (let i = 0; i < localStorage.length; i++) {
    let storedValue = localStorage.key(i);
    console.log(`Item at ${i}: ${storedValue}`);
}

با استفاده از length ویژگی LocalStorage، روی هر فهرستی که ایجاد می‌شود، تکرار می‌کنیم print تمام کلیدهایی که در LocalStorage ذخیره کرده ایم. سپس می توانیم از این کلیدها استفاده کنیم getItem() برای بازیابی تمام داده های ذخیره شده

اکنون که تمام عملکردهای مدیریت داده ها در مرورگر کاربر را پوشش داده ایم، بیایید به مورد خاص ذخیره اشیاء پیچیده به جای داده های رشته ای نگاه کنیم.

ذخیره اشیاء در LocalStorage

LocalStorage فقط می تواند از رشته ها برای کلیدها و مقادیر خود استفاده کند. اگر بخواهیم هر نوع داده دیگری را ذخیره کنیم، قبل از ذخیره آن را به رشته تبدیل می کند. وقتی می‌خواهیم اشیاء جاوا اسکریپت را ذخیره کنیم، این می‌تواند رفتار غیرمنتظره‌ای را به همراه داشته باشد.

بیایید یک را ایجاد کنیم person شی در مرورگر شما console و آن را در LocalStorage ذخیره کنید:

let person = {
    name: "John",
    age: 22
};

localStorage.setItem("profile", person);

اکنون، setItem() را تبدیل می کرد person شی به یک رشته وقتی ما را بازیابی می کنیم person مثل این:

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

مرورگر ما console این را نشان می دهد:

تبدیل شی جاوا اسکریپت به رشته تولید می کند (object Object). مسلما، بازگرداندن رشته ای که فقط نشان می دهد یک شی ذخیره شده است مفید نیست.

برای ذخیره صحیح اشیاء جاوا اسکریپت در LocalStorage، ابتدا باید شیء خود را به یک رشته JSON تبدیل کنیم.

ما از داخلی استفاده می کنیم JSON.stringify() برای این کار رشته حاصل از آن تابع شامل تمام خصوصیات شی JSON ما خواهد بود. هنگام استفاده، خروجی آن تابع را ذخیره می کنیم setItem().

بیایید نجات دهیم person شیء پس از رشته بندی آن:

localStorage.setItem("profile", JSON.stringify(person));

برای بازیابی این داده ها به عنوان یک شی، باید دو کار انجام دهیم. ابتدا باید استفاده کنیم getItem() برای بیرون کشیدن آن از LocalStorage. سپس باید رشته JSON را به یک شی جاوا اسکریپت تبدیل کنیم.

پیشنهاد می‌کنیم بخوانید: روش استفاده از Git Cherry Pick و اجتناب از تعهدات تکراری

بیایید با گرفتن مورد از LocalStorage شروع کنیم:

let storageProfileString = localStorage.getItem("profile");
console.log("String saved in LocalStorage", storageProfileString);

اکنون رشته LocalStorage را به یک شی تبدیل کنید JSON.parse() و آن را به مرورگر وارد کنید console:

let savedPerson = JSON.parse(storageProfileString);
console.log("Person object:", savedPerson);
console.log("Person's name:", savedPerson.name);

با اجرای این کد خروجی زیر به شما داده می شود:

به تفاوت رنگ در console زمانی که ما برای اولین بار رشته را وارد کردیم تا زمانی که شی را ثبت کردیم. ما همچنین وارد شوید name دارایی از person برای اطمینان از اینکه ویژگی های شی هنوز در دسترس هستند.

اکنون که ما یک استراتژی برای گسترش استفاده‌های LocalStorage فراتر از رشته‌ها داریم، بیایید بهترین شیوه‌های استفاده از آن را مورد بحث قرار دهیم.

زمان استفاده از LocalStorage

LocalStorage به ماندگاری اولیه اجازه می دهد روی وبسایت شما. معمولاً برای نگهداری داده هایی استفاده می شود که برای کاربر راحت باشد حتی اگر مرورگر به روز شده باشد. برای مثال، بسیاری از فرم‌ها ورودی کاربر را تا زمان ارسال در LocalStorage ذخیره می‌کنند.

وب‌سایت‌های استاتیک معمولاً از LocalStorage برای ذخیره تنظیمات برگزیده کاربر، مانند یک تم UI استفاده می‌کنند. بدون سرور وب و پایگاه داده برای ذخیره ترجیحات کاربر، LocalStorage به آنها اجازه می دهد تا با سفارشی سازی های خود به استفاده از وب سایت شما ادامه دهند.

با این حال، LocalStorage نباید برای حجم زیاد داده استفاده شود. جدای از محدودیت 5 مگابایتی که ممکن است برای برنامه های کاربردی داده فشرده کافی نباشد، داده های بزرگ هنگام استفاده از LocalStorage هزینه عملکردی را به همراه دارد.

همه توابع LocalStorage عملیات همزمان هستند. بنابراین، اگر در حال ذخیره یا بازیابی تکه‌ای از داده‌ها هستید، جاوا اسکریپت باید آن عملیات LocalStorage را قبل از اجرای کدهای دیگر تکمیل کند.

توجه داشته باشید که هزینه عملکرد هنگام ذخیره اشیاء بزرگ JSON افزایش می یابد. این JSON.stringify() و JSON.parse() توابع نیز همزمان هستند. آنها اجرای جاوا اسکریپت را تا زمانی که کامل شوند مسدود می کنند.

هرگز اطلاعات حساس را در LocalStorage ذخیره نکنید. این شامل گذرواژه‌ها، کلیدهای API، توکن‌های احراز هویت مانند JWT و اطلاعات مالی مانند شماره کارت اعتباری است.

به یاد داشته باشید، هر فایل جاوا اسکریپتی که بارگذاری می شود روی دامنه شما به LocalStorage دسترسی دارد. اگر کد مخرب جاوا اسکریپت توسط شما یا وابستگی‌هایتان اضافه شود، می‌توانند داده‌های کاربر یا نشانه‌هایی را که برای احراز هویت با APIها استفاده می‌کنید، بازیابی کنند.

همیشه داده های حساس را نگه دارید روی قسمت عقب

نتیجه

LocalStorage یک دیتا استور موجود در مرورگرها است. داده ها به صورت جفت رشته های کلید/مقدار ذخیره می شوند و هر دامنه به LocalStorage خود دسترسی دارد.

هنگام ذخیره سازی اشیاء جاوا اسکریپت، مطمئن شوید که آنها را به درستی به رشته ای تبدیل کرده اید JSON.stringify() قبل از ذخیره کردن همانطور که داده ها را بازیابی می کنید، آنها را به یک شی تبدیل کنید JSON.parse().

هنگام استفاده از LocalStorage، از پردازش مقادیر زیاد داده خودداری کنید زیرا ممکن است عملکرد را کاهش دهد زیرا عملکردهای آن همزمان هستند. مهمتر از همه، مطمئن شوید که هیچ داده حساس کاربر یا برنامه در LocalStorage ذخیره نمی شود.

آیا می توانید راه هایی برای بهبود برنامه خود با LocalStorage بیاندیشید؟!

منتشر شده در 1403-01-22 20:34:04

امتیاز شما به این مطلب