docs(10_Wiki): W3Schools 위키화 — HTML/CSS/JavaScript(core)
W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더). - Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외) - Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체) - Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속) 각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,180 @@
|
||||
---
|
||||
id: html-web-storage
|
||||
title: "HTML Web Storage"
|
||||
category: "Frontend"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["Web Storage API", "localStorage", "sessionStorage", "HTML5 storage", "client-side storage"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.90
|
||||
created_at: 2026-06-23
|
||||
updated_at: 2026-06-23
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["html", "web", "frontend", "w3schools", "web-storage", "localstorage", "sessionstorage", "html5"]
|
||||
raw_sources: ["https://www.w3schools.com/html/html5_webstorage.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HTML Web Storage]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
HTML Web Storage lets applications store key/value data locally in the browser — `localStorage` with no expiration and `sessionStorage` for a single tab session — with a far larger limit than cookies (at least 5MB) and without ever sending the data to the server. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Web storage** — stores data locally within the user's browser; more secure than cookies and capable of holding large amounts of data without affecting website performance. [S1]
|
||||
- **`window.localStorage`** — stores data with no expiration date; data is not lost when the browser tab is closed. [S1]
|
||||
- **`window.sessionStorage`** — stores data for one session; data is lost when the browser tab is closed. [S1]
|
||||
- **Per origin** — web storage is per origin (per domain and protocol); all pages from one origin can store and access the same data. [S1]
|
||||
- **Never sent to server** — unlike cookies, the information is never transferred to the server, and the storage limit is far larger (at least 5MB). [S1]
|
||||
|
||||
## 🧩 추출된 패턴 (Extracted patterns)
|
||||
- **Feature-detect with `typeof(Storage)`** — `if (typeof(Storage) !== "undefined") { ... }`. [S1]
|
||||
- **`setItem` / `getItem` / `removeItem`** — create, read, and delete name/value pairs. [S1]
|
||||
- **Values are strings** — name/value pairs are always stored as strings; convert to other formats as needed. [S1]
|
||||
- **Counter idiom** — read a stored count, increment with `Number(...)+1`, and write it back. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
**What is HTML Web Storage?**
|
||||
With web storage, applications can store data locally within the user's browser. Before HTML5, application data had to be stored in cookies, included in every server request. Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance. Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server. Web storage is per origin (per domain and protocol); all pages from one origin can store and access the same data. [S1]
|
||||
|
||||
**The two storage objects** [S1]
|
||||
- `window.localStorage` — stores data with no expiration date (data is not lost when the browser tab is closed).
|
||||
- `window.sessionStorage` — stores data for one session (data is lost when the browser tab is closed).
|
||||
|
||||
**Browser support**
|
||||
|
||||
| API | Chrome | IE | Firefox | Safari | Opera |
|
||||
|---|---|---|---|---|---|
|
||||
| localStorage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
|
||||
| sessionStorage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
|
||||
|
||||
**Feature detection**
|
||||
```javascript
|
||||
const x = document.getElementById("result");
|
||||
if (typeof(Storage) !== "undefined") {
|
||||
x.innerHTML = "Your browser supports Web storage!";
|
||||
} else {
|
||||
x.innerHTML = "Sorry, no Web storage support!";
|
||||
}
|
||||
```
|
||||
|
||||
**The localStorage object**
|
||||
```javascript
|
||||
const x = document.getElementById("result");
|
||||
|
||||
if (typeof(Storage) !== "undefined") {
|
||||
// Store
|
||||
localStorage.setItem("lastname", "Smith");
|
||||
localStorage.setItem("bgcolor", "yellow");
|
||||
// Retrieve
|
||||
x.innerHTML = localStorage.getItem("lastname");
|
||||
x.style.backgroundColor = localStorage.getItem("bgcolor");
|
||||
} else {
|
||||
x.innerHTML = "Sorry, no Web storage support!";
|
||||
}
|
||||
```
|
||||
Example explained: [S1]
|
||||
- Use the `localStorage.setItem()` method to create name/value pairs.
|
||||
- Use the `localStorage.getItem()` method to retrieve the values set.
|
||||
- Retrieve the value of "lastname" and insert it into an element with `id="result"`.
|
||||
- Retrieve the value of "bgcolor" and insert it into the style `backgroundColor` of the element with `id="result"`.
|
||||
|
||||
To remove an item:
|
||||
```javascript
|
||||
localStorage.removeItem("lastname");
|
||||
```
|
||||
|
||||
**Note:** Name/value pairs are always stored as strings. Remember to convert them to another format when needed! [S1]
|
||||
|
||||
**Counting clicks with localStorage**
|
||||
```javascript
|
||||
function clickCounter() {
|
||||
const x = document.getElementById("result");
|
||||
if (typeof(Storage) !== "undefined") {
|
||||
if (localStorage.clickcount) {
|
||||
localStorage.clickcount = Number(localStorage.clickcount)+1;
|
||||
} else {
|
||||
localStorage.clickcount = 1;
|
||||
}
|
||||
x.innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s)!";
|
||||
} else {
|
||||
x.innerHTML = "Sorry, no Web storage support!";
|
||||
}
|
||||
}
|
||||
```
|
||||
Because this uses `localStorage`, the count persists even after the browser is closed and reopened. [S1]
|
||||
|
||||
**The sessionStorage object**
|
||||
The `sessionStorage` object is equal to the `localStorage` object, **except** that it stores the data for only one session — the data is deleted when the user closes the specific browser tab. [S1]
|
||||
```javascript
|
||||
function clickCounter() {
|
||||
const x = document.getElementById("result");
|
||||
if (typeof(Storage) !== "undefined") {
|
||||
if (sessionStorage.clickcount) {
|
||||
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
|
||||
} else {
|
||||
sessionStorage.clickcount = 1;
|
||||
}
|
||||
x.innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s) in this session!";
|
||||
} else {
|
||||
x.innerHTML = "Sorry, no Web storage support!";
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
The applied cases are the persistent name/value store (lastname + bgcolor), the persistent click counter (`localStorage`), and the per-session click counter (`sessionStorage`). No external project/commit applications found in the source.
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Store and retrieve (JavaScript):
|
||||
```javascript
|
||||
localStorage.setItem("lastname", "Smith");
|
||||
const name = localStorage.getItem("lastname");
|
||||
```
|
||||
Remove an item (JavaScript):
|
||||
```javascript
|
||||
localStorage.removeItem("lastname");
|
||||
```
|
||||
Per-session counter increment (JavaScript):
|
||||
```javascript
|
||||
if (sessionStorage.clickcount) {
|
||||
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
|
||||
} else {
|
||||
sessionStorage.clickcount = 1;
|
||||
}
|
||||
```
|
||||
|
||||
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
|
||||
The page presents two storage objects with the same API but different lifetimes: [S1]
|
||||
|
||||
| Object | Expiration / lifetime | Use when |
|
||||
|---|---|---|
|
||||
| `localStorage` | No expiration; survives tab close | Data should persist across sessions |
|
||||
| `sessionStorage` | One session; deleted when the tab is closed | Data should only live for the current tab session |
|
||||
|
||||
Both are per origin, store strings, and offer at least 5MB versus the much smaller, server-transmitted cookies. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
No contradictions found in the source. Practical caveat: values are always strings, so numeric counters use `Number(...)` conversion. [S1]
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.90
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[HTML Tutorial]]
|
||||
- **관련 개념:** [[HTML Web APIs]], [[HTML Geolocation]], [[HTML Web Workers]], [[HTML SSE]]
|
||||
- **참조 맥락:** Referenced whenever an app needs to persist user data client-side without cookies or a server round-trip.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — HTML Web Storage — https://www.w3schools.com/html/html5_webstorage.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Web Storage" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
Reference in New Issue
Block a user