آموزش قدم به قدم ذخیره داده ها در مرورگر

1. افزایش سرعت بارگذاری صفحات

با ذخیره داده‌های پرکاربرد (مانند تنظیمات، تصاویر کوچک، یا داده‌های فرم) در مرورگر، نیازی نیست هر بار این اطلاعات از سرور بارگذاری شوند.

2. ذخیره وضعیت کاربر

برای مثال، اطلاعات لاگین کاربر یا تنظیمات مانند زبان و تم انتخابی ذخیره می‌شوند تا کاربر مجبور نباشد هر بار تنظیمات را دوباره اعمال کند.

3. تحلیل و بررسی داده‌ها

از Web Storage برای ذخیره داده‌های آماری مانند رفتار کاربر استفاده می‌کنیم تا تجربه کاربری بهبود یابد.

4. برنامه‌های وب آفلاین

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

ویژگی‌های Local Storage

• اطلاعات ذخیره‌شده در Local Storage حتی پس از بسته شدن مرورگر یا خاموش شدن دستگاه همچنان باقی می‌مانند
• داده‌های ذخیره‌شده در Local Storage فقط در مرورگر ذخیره می‌شوند و هنگام باز کردن سایت به سرور ارسال نمی‌شوند
• ظرفیت ذخیره داده‌ها تا ۵ مگابایت (بسته به مرورگر) است

موارد استفاده

• ذخیره تنظیمات کاربر مانند حالت تاریک، روشن یا زبان
• ذخیره اطلاعات فرم‌ها به طور موقت برای جلوگیری از از دست رفتن داده‌ها
• ذخیره داده‌های غیر حساس که نیاز به دسترسی سریع دارند

نحوه استفاده

sessionStorage.setItem("داده‌ی موردنظر","کلید یا نام داده ها")

const user = {name:"Matin",phone:"09128455626"}
sessionStorage.setItem("user",JSON.stringify(user))

sessionStorage.getItem("کلید یا نام داده ها");

const stringUser = sessionStorage.getItem("user");
const objectUser = JSON.stringify(stringUser);

sessionStorage.removeItem("user")

sessionStorage.clear()

ویژگی‌های Session Storage

• داده‌های ذخیره‌شده در Session Storage فقط تا زمانی که تب یا پنجره مرورگر باز است، باقی می‌مانند
• داده‌های ذخیره‌شده در Session Storage فقط در مرورگر نگهداری می‌شوند و به سرور ارسال نمی‌شوند
• مشابه Local Storage، معمولاً ظرفیت آن تا ۵ مگابایت است

موارد استفاده

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

نحوه استفاده

sessionStorage.setItem("داده‌ی موردنظر","کلید یا نام داده ها")

const user = {name:"Matin",phone:"09128455626"}
sessionStorage.setItem("user",JSON.stringify(user))

sessionStorage.getItem("کلید یا نام داده ها");

const stringUser = sessionStorage.getItem("user");
const objectUser = JSON.stringify(stringUser);

sessionStorage.removeItem("user")

sessionStorage.clear()

ویژگی‌های Cookie

• برای ذخیره اطلاعات ورود کاربر یا وضعیت احراز هویت استفاده می‌شوند
• امکان ذخیره‌سازی داده‌های حساس(باید اقدامات امنیتی رعایت شود)
• برخلاف Local و Session Storage، کوکی‌ها می‌توانند همراه با هر درخواست HTTP به سرور ارسال شوند
• ظرفیت تا چهار کیلوبایت

موارد استفاده

• برای شخصی‌سازی تجربه کاربر یا تبلیغات هدفمند استفاده می‌شود
• احراز هویت: نگهداری اطلاعات نشست کاربری برای تشخیص هویت در درخواست‌های بعدی
• ذخیره تنظیمات مانند حالت تم سایت یا انتخاب‌های کاربر

نحوه استفاده

const user = {name:"Matin",phone:"09128455626"}
document.cookie = "user="+JSON.stringify(user)+"; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

// بازیابی تمام کوکی‌ها
const allCookies = document.cookie


// پیدا کردن کوکی با استفاده از نام آن
function getCookieValue(cookieName) {
	const cookies = document.cookie.split('; ');

	for (let cookie of cookies) {
		const [name, value] = cookie.split('=');
		if (name === cookieName) {
			return decodeURIComponent(value);
		}
	}
	
	return null; // مقدار کوکی 'user' یا null اگر پیدا نشود
}

const userCookie = getCookieValue('user');

from django.http import HttpResponse

def set_cookie_view(request):
	response = HttpResponse("Cookie is set successfully!")

	response.set_cookie(
		key='user',
		value='{"name":"Matin","phone":"09128455626"}',  # مقدار کوکی
		max_age=3600,  # مدت زمان انقضا به ثانیه (1 ساعت)
		httponly=True,  # فقط از سرور قابل دسترسی باشد
		secure=True,  # فقط در HTTPS ارسال شود
		samesite='Strict'  # ارسال فقط در درخواست‌های اصلی سایت
	)
	return response

const express = require('express');
const app = express();

app.get('/set-cookie', (req, res) => {
	res.cookie('user', JSON.stringify({ name: 'Matin',phone:"09128455626" }), {
		httpOnly: true, // فقط از طریق سرور قابل دسترسی
		secure: true,   // فقط روی HTTPS ارسال شود
		sameSite: 'Strict', // فقط در دامنه اصلی ارسال شود
	});
	res.send('HttpOnly cookie set!');
});

app.listen(3000, () => {
	console.log('Server is running on http://localhost:3000');
});