Local Storage یکی از قابلیتهای Web Storage API در مرورگرهاست که به شما اجازه میدهد دادهها را بهصورت دائمی و بدون تاریخ انقضا در مرورگر ذخیره کنید.
بر خلاف کوکیها، دادههای Local Storage به سرور ارسال نمیشوند و حجم بیشتری (حدود ۵ مگابایت) را پشتیبانی میکنند.
با بستن مرورگر، ریفرش کردن صفحه یا حتی خاموش کردن سیستم دادهها حذف نمیشوند.
کوکیها حدود 4KB ظرفیت دارند، اما Local Storage معمولاً تا 5MB فضا میدهد.
در هر درخواست HTTP دادهها ارسال نمیشوند، بنابراین امنتر و سریعتر هستند.
تمام دادهها به صورت key / value ذخیره میشوند و فقط متن (string) ذخیره میشود.
1. ذخیره داده
localStorage.setItem("username", "amir");
2. خواندن داده
let user = localStorage.getItem("username");
console.log(user);
3. حذف یک داده
localStorage.removeItem("username");
4. پاک کردن تمام دادهها
localStorage.clear();
1. ذخیره وضعیت کاربری
2. ذخیره اطلاعات فرم
3. ساخت To-Do List
4. ذخیره وضعیت سبد خرید در فروشگاه اینترنتی
5. ذخیره تنظیمات سایت
Local Storage برای ذخیره اطلاعات حساس مثل رمز عبور مناسب نیست
چون:
قابل خواندن توسط JavaScript است
در برابر XSS آسیبپذیر است
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Task Manager</h1>
<div class="input-container">
<input type="text" id="taskInput" placeholder="What needs to be done?">
<button id="addTaskBtn">Add Task</button>
</div>
<ul id="taskList"></ul>
</div>
<script >
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #e8f4f8;
}
.container {
background-color: #ffffff;
border-radius: 12px;
padding: 30px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
width: 500px;
}
h1 {
font-size: 2.2rem;
margin-bottom: 20px;
font-weight: 700;
color: #1a73e8; /* Updated to a calming blue tone */
text-align: center;
}
.input-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
input[type="text"] {
width: 70%;
padding: 12px;
font-size: 1rem;
border-radius: 8px;
border: 2px solid #1a73e8;
outline: none;
transition: 0.3s;
}
button {
padding: 12px 20px;
background-color: #1a73e8;
color: #fff;
border: none;
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
transition: 0.3s;
}
button:hover {
background-color: #0056b3;
}
ul {
list-style: none;
padding: 0;
}
li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 2px dashed #787a7b38;
font-size: 1rem;
}
li button {
background-color: transparent;
color: #34a853;
font-size: 1.5rem;
border: none;
cursor: pointer;
margin-right: 10px;
transition: 0.3s;
}
li button:hover {
color: #000000;
}
li .remove-btn {
background-color: #ea4335;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 10px;
cursor: pointer;
font-size: 0.9rem;
transition: 0.3s;
}
li .remove-btn:hover {
background-color: #b71c1c;
}
.completed {
text-decoration: line-through;
color: #6c757d;
}
JS
let tasks = [];
const btnAddTask = document.getElementById('addTaskBtn');
btnAddTask.addEventListener("click", function(){
addTask();
});
= function () {
const saved = localStorage.getItem("tasks");
if (saved) {
tasks = JSON.parse(saved);
renderTasks();
}
};
function addTask() {
const taskInput = document.getElementById('taskInput');
const taskText = taskInput.value.trim();
if (taskText === '') {
alert('Please enter a task');
return;
}
tasks.push({ text: taskText, completed: false });
saveTasks();
renderTasks();
taskInput.value = '';
}
function saveTasks() {
localStorage.setItem("tasks", JSON.stringify(tasks));
}
function renderTasks() {
const taskList = document.getElementById('taskList');
taskList = "";
tasks.forEach((task, index) => {
const listItem = document.createElement('li');
const taskSpan = document.createElement('span');
taskSpan.textContent = task.text;
if (task.completed) taskSpan.classList.add('completed');
const completeButton = document.createElement('button');
completeButton = '✔';
completeButton.onclick = () => {
task.completed = !task.completed;
saveTasks();
renderTasks();
};
const removeButton = document.createElement('button');
removeButton.textContent = 'Remove';
removeButton.className = 'remove-btn';
removeButton.onclick = () => {
tasks.splice(index, 1);
saveTasks();
renderTasks();
};
listItem(completeButton);
listItem(taskSpan);
listItem(removeButton);
taskList(listItem);
});
}
Local Storage یک ابزار قدرتمند در JavaScript است که به شما امکان ذخیره دادههای پایدار را با سرعت و سادگی بالا میدهد.
اگر پروژههایی مثل To-Do، فرم ثبتنام، تنظیمات کاربری یا سبد خرید میسازی، استفاده از این قابلیت کار تو را بسیار ساده و حرفهای میکند.
