Очистка данных сайта: Cookies, Cache, Service Workers на JavaScript
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<title>پاکسازی اطلاعات سایتها</title>
// پاک کردن کوکیهای قابل دسترسی جاوااسکریپت
document.cookie.split(";").forEach(cookie => {
const name = cookie.split("=")[0].trim();
document.cookie =
name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/";
});
// پاک کردن همه Cache all Storage
if ("caches" in window) {
const cacheNames = await caches.keys();
await Promise.all(cacheNames.map(name => caches.delete(name)));
}
// پاک کردن همه Service all Workerها
if ("serviceWorker" in navigator) {
const registrations =
await navigator.serviceWorker.getRegistrations();
await Promise.all(
registrations.map(registration =>
registration.unregister()
)
);
}
all alert("اطلاعات ذخیرهشدهٔ این سایتهاپاک شد.");
location.reload();
});
</script>
</body>
</html>
This HTML code appears to be designed to clear various types of stored data for a website, including cookies, cache, and service workers. It also includes an alert message and reloads the page.
Here's a breakdown of what each part does:
<!DOCTYPE html>and<html lang="fa" dir="rtl">: These declare the document type and set the language to Persian (fa) with a right-to-left text direction (rtl).<head>: Contains metadata about the HTML document.<meta charset="UTF-8">: Specifies the character encoding for the document, ensuring proper display of characters.<title>پاکسازی اطلاعات سایتها</title>: Sets the title of the page, which appears in the browser tab. In this case, it translates to "Clearing Website Data".
<script>block: This is where the JavaScript code for clearing data resides.- Clearing Cookies:
document.cookie.split(";").forEach(cookie => { ... });: This iterates through all cookies associated with the current domain.const name = cookie.split("=")[0].trim();: Extracts the name of each cookie.document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/";: This line effectively deletes a cookie by setting its expiration date to a time in the past and setting its value to empty. Thepath=/ensures it applies to all paths on the domain.
- Clearing Cache:
if ("caches" in window): Checks if the browser supports the Cache API.const cacheNames = await caches.keys();: Retrieves all cache names.await Promise.all(cacheNames.map(name => caches.delete(name)));: Deletes all found caches.
- Clearing Service Workers:
if ("serviceWorker" in navigator): Checks if the browser supports Service Workers.const registrations = await navigator.serviceWorker.getRegistrations();: Gets all registered service workers.await Promise.all(registrations.map(registration => registration.unregister()));: Unregisters all service workers.
- Alert and Reload:
all alert("اطلاعات ذخیرهشدهٔ این سایتها پاک شد.");: Displays an alert box with the message "Stored data of this site has been cleared." (Note:allbeforealertis likely a typo and should be removed).location.reload();: Reloads the current page.
- Clearing Cookies:
Potential Improvements/Considerations:
- Typo in
alert: Theallbeforealertis likely an error and should be removed. - Error Handling: The script doesn't include any error handling. If any of the clearing operations fail, the script will continue without indicating the problem.
- User Confirmation: It might be beneficial to ask the user for confirmation before clearing all their data, as this action is irreversible.
- Scope of Clearing: This script clears data for the current website. It does not affect data from other websites.
این کد HTML برای پاک کردن انواع دادههای ذخیرهشده برای یک وبسایت طراحی شده است، از جمله کوکیها، کش (Cache) و سرویسورکرها (Service Workers). همچنین شامل یک پیام هشدار و بارگذاری مجدد صفحه است.
در اینجا تفکیک هر بخش آمده است:
<!DOCTYPE html>و<html lang="fa" dir="rtl">: اینها نوع سند را اعلام میکنند و زبان را فارسی (fa) با جهت متن از راست به چپ (rtl) تنظیم میکنند.<head>: حاوی فراداده (metadata) درباره سند HTML است.<meta charset="UTF-8">: رمزگذاری کاراکترهای سند را مشخص میکند و از نمایش صحیح کاراکترها اطمینان حاصل میکند.<title>پاکسازی اطلاعات سایتها</title>: عنوان صفحه را تنظیم میکند که در تب مرورگر نمایش داده میشود. در این مورد، به معنی "پاکسازی اطلاعات سایتها" است.
- بخش
<script>: اینجاست که کد جاوااسکریپت برای پاک کردن دادهها قرار دارد.- پاک کردن کوکیها:
document.cookie.split(";").forEach(cookie => { ... });: این کد از طریق تمام کوکیهای مرتبط با دامنه فعلی پیمایش میکند.const name = cookie.split("=")[0].trim();: نام هر کوکی را استخراج میکند.document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/";: این خط با تنظیم تاریخ انقضای کوکی به زمانی در گذشته و تنظیم مقدار آن به خالی، به طور موثر یک کوکی را حذف میکند.path=/تضمین میکند که این مورد برای همه مسیرهای دامنه اعمال میشود.
- پاک کردن کش (Cache):
if ("caches" in window): بررسی میکند که آیا مرورگر از API کش پشتیبانی میکند.const cacheNames = await caches.keys();: تمام نامهای کش را بازیابی میکند.await Promise.all(cacheNames.map(name => caches.delete(name)));: تمام کشهای یافت شده را حذف میکند.
- پاک کردن سرویسورکرها (Service Workers):
if ("serviceWorker" in navigator): بررسی میکند که آیا مرورگر از سرویسورکرها پشتیبانی میکند.const registrations = await navigator.serviceWorker.getRegistrations();: تمام سرویسورکرهای ثبتشده را دریافت میکند.await Promise.all(registrations.map(registration => registration.unregister()));: تمام سرویسورکرها را لغو ثبت میکند.
- هشدار و بارگذاری مجدد:
all alert("اطلاعات ذخیرهشدهٔ این سایتها پاک شد.");: یک کادر هشدار با پیام "اطلاعات ذخیرهشدهٔ این سایتها پاک شد." نمایش میدهد. (توجه:allقبل ازalertاحتمالاً یک اشتباه تایپی است و باید حذف شود).location.reload();: صفحه فعلی را مجدداً بارگذاری میکند.
- پاک کردن کوکیها:
بهبودهای احتمالی / ملاحظات:
- اشتباه تایپی در
alert:allقبل ازalertاحتمالاً یک خطا است و باید حذف شود. - مدیریت خطا: این اسکریپت شامل هیچ مدیریت خطایی نیست. اگر هر یک از عملیات پاکسازی با شکست مواجه شود، اسکریپت بدون نشان دادن مشکل ادامه مییابد.
- تأیید کاربر: ممکن است مفید باشد که قبل از پاک کردن تمام دادههای کاربر، از او تأییدیه گرفته شود، زیرا این عمل غیرقابل برگشت است.
- دامنه پاکسازی: این اسکریپت دادهها را برای وبسایت فعلی پاک میکند. این مورد بر دادههای وبسایتهای دیگر تأثیر نمیگذارد.
بله حتما! این کد جاوا اسکریپت را میتوانید در صفحه وب خود قرار دهید تا کوکیها، کش و سرویسورکرها را پاک کنید:
function clearAllData() {
// پاک کردن کوکیها
document.cookie.split(";").forEach(cookie => {
const name = cookie.split("=")[0].trim();
document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/";
});
// پاک کردن کش
if ("caches" in window) {
caches.keys().then(cacheNames => {
cacheNames.forEach(name => {
caches.delete(name);
});
});
}
// پاک کردن سرویسورکرها
if ("serviceWorker" in navigator) {
navigator.serviceWorker.getRegistrations().then(registrations => {
registrations.forEach(registration => {
registration.unregister();
});
});
}
alert("تمام اطلاعات ذخیرهشده پاک شد.");
location.reload();
}
// برای اجرای تابع، میتوانید آن را به یک دکمه یا رویداد دیگری متصل کنید.
// مثال: فراخوانی تابع با کلیک روی یک دکمه با id="resetButton"
// document.getElementById("resetButton").addEventListener("click", clearAllData);
توضیحات کد:
clearAllData(): این تابع اصلی است که تمام عملیات پاکسازی را انجام میدهد.- پاک کردن کوکیها:
document.cookie.split(";"): تمام کوکیهای موجود را به صورت آرایهای از رشتهها جدا میکند..forEach(cookie => { ... }): روی هر کوکی پیمایش میکند.const name = cookie.split("=")[0].trim(): نام کوکی را استخراج میکند.document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/";: با تنظیم تاریخ انقضا به گذشته، کوکی را حذف میکند.
- پاک کردن کش:
if ("caches" in window): بررسی میکند که آیا مرورگر از API کش پشتیبانی میکند.caches.keys().then(cacheNames => { ... }): تمام نامهای کش را دریافت کرده و سپس روی هر کدام پیمایش میکند.caches.delete(name): هر کش را حذف میکند.
- پاک کردن سرویسورکرها:
if ("serviceWorker" in navigator): بررسی میکند که آیا مرورگر از سرویسورکرها پشتیبانی میکند.navigator.serviceWorker.getRegistrations().then(registrations => { ... }): تمام سرویسورکرهای ثبتشده را دریافت کرده و سپس روی هر کدام پیمایش میکند.registration.unregister(): سرویسورکر را لغو ثبت میکند.
alert("تمام اطلاعات ذخیرهشده پاک شد.");: یک پیام هشدار به کاربر نمایش میدهد.location.reload();: صفحه را مجدداً بارگذاری میکند تا تغییرات اعمال شوند.
نحوه استفاده:
شما میتوانید این تابع را به یک رویداد خاص، مثلاً کلیک روی یک دکمه، متصل کنید. برای مثال، اگر یک دکمه با id="resetButton" دارید، میتوانید از کد زیر برای فراخوانی تابع استفاده کنید:
document.getElementById("resetButton").addEventListener("click", clearAllData);
نکته مهم: این کد تمام دادههای ذخیرهشده مربوط به همین سایت را پاک میکند و قابل بازگشت نیست. لطفاً با دقت از آن استفاده کنید.
برای اضافه کردن کد جاوا اسکریپت به یک فایل HTML و فراخوانی آن، مراحل زیر را دنبال کنید:
1. ایجاد فایل HTML
ابتدا یک فایل HTML ایجاد کنید. میتوانید از یک ویرایشگر متن ساده مانند Notepad (در ویندوز) یا TextEdit (در مک) استفاده کنید، یا از ویرایشگرهای کد پیشرفتهتر مانند VS Code، Sublime Text یا Atom بهره ببرید.
فایل 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>پاکسازی اطلاعات</title>
<style>
/* استایلهای دلخواه برای دکمه */
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>پاکسازی اطلاعات سایت</h1>
<p>با کلیک روی دکمه زیر، کوکیها، کش و سرویسورکرهای این سایت پاک خواهند شد.</p>
<button id="resetButton">پاکسازی اطلاعات</button>
<!-- اینجا کد جاوا اسکریپت قرار میگیرد -->
<script>
// کد جاوا اسکریپت شما در اینجا قرار میگیرد
</script>
</body>
</html>
2. اضافه کردن کد جاوا اسکریپت
کد جاوا اسکریپتی که قبلاً ارائه شد را درون تگ <script> در انتهای بخش <body> قرار دهید. بهتر است کدهای جاوا اسکریپت را در انتهای <body> قرار دهید تا مطمئن شوید که عناصر 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>پاکسازی اطلاعات</title>
<style>
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>پاکسازی اطلاعات سایت</h1>
<p>با کلیک روی دکمه زیر، کوکیها، کش و سرویسورکرهای این سایت پاک خواهند شد.</p>
<button id="resetButton">پاکسازی اطلاعات</button>
<script>
function clearAllData() {
// پاک کردن کوکیها
document.cookie.split(";").forEach(cookie => {
const name = cookie.split("=")[0].trim();
document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/";
});
// پاک کردن کش
if ("caches" in window) {
caches.keys().then(cacheNames => {
cacheNames.forEach(name => {
caches.delete(name);
});
});
}
// پاک کردن سرویسورکرها
if ("serviceWorker" in navigator) {
navigator.serviceWorker.getRegistrations().then(registrations => {
registrations.forEach(registration => {
registration.unregister();
});
});
}
alert("تمام اطلاعات ذخیرهشده پاک شد.");
location.reload();
}
// اتصال تابع به رویداد کلیک دکمه
document.getElementById("resetButton").addEventListener("click", clearAllData);
</script>
</body>
</html>
3. توضیح بخشهای کلیدی:
<button id="resetButton">پاکسازی اطلاعات</button>: این یک دکمه در صفحه HTML ایجاد میکند که کاربر با کلیک روی آن، عملیات پاکسازی را آغاز میکند.id="resetButton"یک شناسه منحصر به فرد به دکمه میدهد تا بتوانیم آن را در جاوا اسکریپت پیدا کنیم.document.getElementById("resetButton"): این دستور در جاوا اسکریپت، عنصر دکمهای کهidآنresetButtonاست را پیدا میکند..addEventListener("click", clearAllData): این قسمت یک "شنونده رویداد" به دکمه اضافه میکند. هر زمان که روی دکمه کلیک شود ("click"), تابعclearAllDataاجرا خواهد شد.function clearAllData() { ... }: این تابع همان کدی است که عملیات پاکسازی کوکیها، کش و سرویسورکرها را انجام میدهد و سپس یک پیام هشدار نمایش داده و صفحه را مجدداً بارگذاری میکند.
4. ذخیره و اجرای فایل
- فایل را با پسوند
.htmlذخیره کنید (مثلاًclear_data.html). - فایل را با مرورگر وب خود باز کنید (معمولاً با دوبار کلیک کردن روی فایل).
- روی دکمه "پاکسازی اطلاعات" کلیک کنید تا کد جاوا اسکریپت اجرا شود.
روش دیگر: قرار دادن کد جاوا اسکریپت در یک فایل جداگانه
برای پروژههای بزرگتر، بهتر است کد جاوا اسکریپت را در یک فایل جداگانه (مثلاً script.js) قرار دهید و سپس آن فایل را در HTML خود فراخوانی کنید.
مرحله 1: ایجاد فایل script.js
یک فایل جدید به نام script.js در کنار فایل HTML خود ایجاد کنید و کد جاوا اسکریپت را در آن قرار دهید:
// script.js
function clearAllData() {
// پاک کردن کوکیها
document.cookie.split(";").forEach(cookie => {
const name = cookie.split("=")[0].trim();
document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/";
});
// پاک کردن کش
if ("caches" in window) {
caches.keys().then(cacheNames => {
cacheNames.forEach(name => {
caches.delete(name);
});
});
}
// پاک کردن سرویسورکرها
if ("serviceWorker" in navigator) {
navigator.serviceWorker.getRegistrations().then(registrations => {
registrations.forEach(registration => {
registration.unregister();
});
});
}
alert("تمام اطلاعات ذخیرهشده پاک شد.");
location.reload();
}
// اتصال تابع به رویداد کلیک دکمه
// این قسمت باید در فایل HTML فراخوانی شود یا اینجا بماند
// اگر اینجا بماند، باید مطمئن شوید که DOM آماده است
document.addEventListener('DOMContentLoaded', (event) => {
const resetButton = document.getElementById("resetButton");
if (resetButton) {
resetButton.addEventListener("click", clearAllData);
}
});
مرحله 2: لینک کردن فایل script.js به HTML
فایل HTML خود را به شکل زیر ویرایش کنید و تگ <script> را برای فراخوانی فایل script.js اضافه کنید:
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>پاکسازی اطلاعات</title>
<style>
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>پاکسازی اطلاعات سایت</h1>
<p>با کلیک روی دکمه زیر، کوکیها، کش و سرویسورکرهای این سایت پاک خواهند شد.</p>
<button id="resetButton">پاکسازی اطلاعات</button>
<!-- لینک کردن فایل جاوا اسکریپت خارجی -->
<script src="script.js"></script>
</body>
</html>
با این روش، کد جاوا اسکریپت شما از کد HTML جدا شده و مدیریت آن آسانتر میشود.
برای اضافه کردن کد جاوا اسکریپت به یک فایل HTML و فراخوانی آن، مراحل زیر را دنبال کنید:
1. ایجاد فایل HTML
ابتدا یک فایل HTML ایجاد کنید. میتوانید از یک ویرایشگر متن ساده مانند Notepad (در ویندوز) یا TextEdit (در مک) استفاده کنید، یا از ویرایشگرهای کد پیشرفتهتر مانند VS Code، Sublime Text یا Atom بهره ببرید.
فایل 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>پاکسازی اطلاعات</title>
<style>
/* استایلهای دلخواه برای دکمه */
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>پاکسازی اطلاعات سایت</h1>
<p>با کلیک روی دکمه زیر، کوکیها، کش و سرویسورکرهای این سایت پاک خواهند شد.</p>
<button id="resetButton">پاکسازی اطلاعات</button>
<!-- اینجا کد جاوا اسکریپت قرار میگیرد -->
<script>
// کد جاوا اسکریپت شما در اینجا قرار میگیرد
</script>
</body>
</html>
2. اضافه کردن کد جاوا اسکریپت
کد جاوا اسکریپتی که قبلاً ارائه شد را درون تگ <script> در انتهای بخش <body> قرار دهید. بهتر است کدهای جاوا اسکریپت را در انتهای <body> قرار دهید تا مطمئن شوید که عناصر 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>پاکسازی اطلاعات</title>
<style>
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>پاکسازی اطلاعات سایت</h1>
<p>با کلیک روی دکمه زیر، کوکیها، کش و سرویسورکرهای این سایت پاک خواهند شد.</p>
<button id="resetButton">پاکسازی اطلاعات</button>
<script>
function clearAllData() {
// پاک کردن کوکیها
document.cookie.split(";").forEach(cookie => {
const name = cookie.split("=")[0].trim();
document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/";
});
// پاک کردن کش
if ("caches" in window) {
caches.keys().then(cacheNames => {
cacheNames.forEach(name => {
caches.delete(name);
});
});
}
// پاک کردن سرویسورکرها
if ("serviceWorker" in navigator) {
navigator.serviceWorker.getRegistrations().then(registrations => {
registrations.forEach(registration => {
registration.unregister();
});
});
}
alert("تمام اطلاعات ذخیرهشده پاک شد.");
location.reload();
}
// اتصال تابع به رویداد کلیک دکمه
document.getElementById("resetButton").addEventListener("click", clearAllData);
</script>
</body>
</html>
3. توضیح بخشهای کلیدی:
<button id="resetButton">پاکسازی اطلاعات</button>: این یک دکمه در صفحه HTML ایجاد میکند که کاربر با کلیک روی آن، عملیات پاکسازی را آغاز میکند.id="resetButton"یک شناسه منحصر به فرد به دکمه میدهد تا بتوانیم آن را در جاوا اسکریپت پیدا کنیم.document.getElementById("resetButton"): این دستور در جاوا اسکریپت، عنصر دکمهای کهidآنresetButtonاست را پیدا میکند..addEventListener("click", clearAllData): این قسمت یک "شنونده رویداد" به دکمه اضافه میکند. هر زمان که روی دکمه کلیک شود ("click"), تابعclearAllDataاجرا خواهد شد.function clearAllData() { ... }: این تابع همان کدی است که عملیات پاکسازی کوکیها، کش و سرویسورکرها را انجام میدهد و سپس یک پیام هشدار نمایش داده و صفحه را مجدداً بارگذاری میکند.
4. ذخیره و اجرای فایل
- فایل را با پسوند
.htmlذخیره کنید (مثلاًclear_data.html). - فایل را با مرورگر وب خود باز کنید (معمولاً با دوبار کلیک کردن روی فایل).
- روی دکمه "پاکسازی اطلاعات" کلیک کنید تا کد جاوا اسکریپت اجرا شود.
روش دیگر: قرار دادن کد جاوا اسکریپت در یک فایل جداگانه
برای پروژههای بزرگتر، بهتر است کد جاوا اسکریپت را در یک فایل جداگانه (مثلاً script.js) قرار دهید و سپس آن فایل را در HTML خود فراخوانی کنید.
مرحله 1: ایجاد فایل script.js
یک فایل جدید به نام script.js در کنار فایل HTML خود ایجاد کنید و کد جاوا اسکریپت را در آن قرار دهید:
// script.js
function clearAllData() {
// پاک کردن کوکیها
document.cookie.split(";").forEach(cookie => {
const name = cookie.split("=")[0].trim();
document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/";
});
// پاک کردن کش
if ("caches" in window) {
caches.keys().then(cacheNames => {
cacheNames.forEach(name => {
caches.delete(name);
});
});
}
// پاک کردن سرویسورکرها
if ("serviceWorker" in navigator) {
navigator.serviceWorker.getRegistrations().then(registrations => {
registrations.forEach(registration => {
registration.unregister();
});
});
}
alert("تمام اطلاعات ذخیرهشده پاک شد.");
location.reload();
}
// اتصال تابع به رویداد کلیک دکمه
// این قسمت باید در فایل HTML فراخوانی شود یا اینجا بماند
// اگر اینجا بماند، باید مطمئن شوید که DOM آماده است
document.addEventListener('DOMContentLoaded', (event) => {
const resetButton = document.getElementById("resetButton");
if (resetButton) {
resetButton.addEventListener("click", clearAllData);
}
});
مرحله 2: لینک کردن فایل script.js به HTML
فایل HTML خود را به شکل زیر ویرایش کنید و تگ <script> را برای فراخوانی فایل script.js اضافه کنید:
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>پاکسازی اطلاعات</title>
<style>
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>پاکسازی اطلاعات سایت</h1>
<p>با کلیک روی دکمه زیر، کوکیها، کش و سرویسورکرهای این سایت پاک خواهند شد.</p>
<button id="resetButton">پاکسازی اطلاعات</button>
<!-- لینک کردن فایل جاوا اسکریپت خارجی -->
<script src="script.js"></script>
</body>
</html>
با این روش، کد جاوا اسکریپت شما از کد HTML جدا شده و مدیریت آن آسانتر میشود.