https://virgool.ir/feed/@amirmohamadnorizadehProgrammer 💻☕fa2026-11-12 05:55:31https://files.virgool.ir/upload/users/1721034/avatar/bj5aaN.jpghttps://virgool.ir/@amirmohamadnorizadehhttps://virgool.ir/@amirmohamadnorizadeh/local-storage-javascript-—-راهنمای-کامل-و-کاربردی-vvyu9hvwo71nLocal Storage چیست؟Local Storage یکی از قابلیتهای Web Storage API در مرورگرهاست که به شما اجازه میدهد دادهها را بهصورت دائمی و بدون تاریخ انقضا در مرورگر ذخیره کنید.بر خلاف کوکیها، دادههای Local Storage به سرور ارسال نمیشوند و حجم بیشتری (حدود ۵ مگابایت) را پشتیبانی میکنند.ویژگیهای اصلی Local Storage✔ دائمی بودن دادههابا بستن مرورگر، ریفرش کردن صفحه یا حتی خاموش کردن سیستم دادهها حذف نمیشوند.✔ حجم بیشتر نسبت به کوکیکوکیها حدود 4KB ظرفیت دارند، اما Local Storage معمولاً تا 5MB فضا میدهد.✔ عدم ارسال به سروردر هر درخواست HTTP دادهها ارسال نمیشوند، بنابراین امنتر و سریعتر هستند.✔ استفاده بسیار راحتتمام دادهها به صورت key / value ذخیره میشوند و فقط متن (string) ذخیره میشود.• روشهای اصلی کار با Local Storage1. ذخیره دادهlocalStorage.setItem("username", "amir");2. خواندن دادهlet user = localStorage.getItem("username");console.log(user);3. حذف یک دادهlocalStorage.removeItem("username");4. پاک کردن تمام دادههاlocalStorage.clear();• کاربردهای مهم و واقعی Local Storage1. ذخیره وضعیت کاربری2. ذخیره اطلاعات فرم3. ساخت To-Do List4. ذخیره وضعیت سبد خرید در فروشگاه اینترنتی5. ذخیره تنظیمات سایت• نکات امنیتی مهمLocal Storage برای ذخیره اطلاعات حساس مثل رمز عبور مناسب نیستچون:قابل خواندن توسط JavaScript استدر برابر XSS آسیبپذیر است• بریم با هم دیگه یک مثال کامل بزنیم. ساخت --> To-Do ListHTML<!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;}JSlet 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);});}خروجیTo-Do List• جمع بندیLocal Storage یک ابزار قدرتمند در JavaScript است که به شما امکان ذخیره دادههای پایدار را با سرعت و سادگی بالا میدهد.اگر پروژههایی مثل To-Do، فرم ثبتنام، تنظیمات کاربری یا سبد خرید میسازی، استفاده از این قابلیت کار تو را بسیار ساده و حرفهای میکند.امیر محمد نوری زادهامیر محمد نوری زادهTue, 25 Nov 2025 21:40:43 +0330