[모던 JavaScript 튜토리얼] - (추가 주제)[4.2] 웹 스토리지(localStorage & sessionStorage)

IRISH·2024년 2월 10일

JS

목록 보기

74/80

학습일 : 2024.02.10
참고 URL
- https://ko.javascript.info/localstorage

학습 내용

로컬 스토리지 & 세션 스토리지
- 모두 웹 스토리지 객체이다.
- 브라우저 내에 키-값 쌍을 저장할 수 있게 해준다.
쿠키를 통해 브라우저에 데이터를 저장할 수 있음에도 불구하고, 이 둘에게 데이터를 저장하는 이유
- 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않는다. 이런 특징 때문에 쿠키보다 더 많은 자료를 보관할 수 있다.
- 쿠키와 또 다른 점은 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다는 것이다. 웹 스토리지 객체 조작은 모두 자바스크립트 내에서 수행된다.
- 웹 스토리지 객체는 도메인·프로토콜·포트로 정의되는 오리진(origin)에 묶여있다. 따라서 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없다.
모두 동일한 메서드와 프로퍼티를 제공함
- setItem(key, value) – 키-값 쌍을 보관합니다.
- getItem(key) – 키에 해당하는 값을 받아옵니다.
- removeItem(key) – 키와 해당 값을 삭제합니다.
- clear() – 모든 것을 삭제합니다.
- key(index) – 인덱스(index)에 해당하는 키를 받아옵니다.
- length – 저장된 항목의 개수를 얻습니다.
키와 값은 반드시 문자열이어야 함
제한 용량은 5MB 이상인데, 브라우저에 따라 다를 수 있음
파기되지 않음
오리진(도메인·포트·프로토콜)에 묶여있음

localStorage

오리진이 같은 경우 데이터는 모든 탭과 창에서 공유됨
브라우저나 OS가 재시작하더라도 데이터가 파기되지 않음
localStorage의 키와 값은 반드시 문자열이어야 함
- JSON을 활용하여 객체를 문자열로 치환한 후 사용 가능

sessionStorage

sessionStorage는 현재 떠 있는 탭 내에서만 유지됨
- 같은 페이지라도 다른 탭에 있으면 다른 곳에 저장되기 때문
- 그런데 하나의 탭에 여러 개의 iframe이 있는 경우엔 동일한 오리진에서 왔다고 취급되기 때문에 sessionStorage가 공유됨
페이지를 새로 고침할 때 sessionStorage에 저장된 데이터는 사라지지 않음
- 하지만 탭을 닫고 새로 열 때는 사라짐

storage 이벤트

localStorage나 sessionStorage의 데이터가 갱신될 때, storage 이벤트가 실행됩니다. storage 이벤트는 다음과 같은 프로퍼티를 지원

key – 변경된 데이터의 키(.clear()를 호출했다면 null)
oldValue – 이전 값(키가 새롭게 추가되었다면 null)
newValue – 새로운 값(키가 삭제되었다면 null)
url – 갱신이 일어난 문서의 url
storageArea – 갱신이 일어난 localStorage나 sessionStorage 객체

과제

양식 필드를 자동으로 저장하기

⇒ html

<!DOCTYPE html>
<html>
<head>
    <title>Web Storage Homework</title>
</head>

<body>
    <form>
        <textarea id="tar" cols="20" rows="3" placeholder="글을 입력하세요."></textarea> </br>
        <input id="btn" type="submit" value="submit">
    </form>

    <script src="4-2-1-webStorage.js"></script>
</body>
</html>

⇒ js

// Wait for the DOM to be fully loaded
document.addEventListener('DOMContentLoaded', function() {
    // Get the form, textarea, and button elements
    const form = document.querySelector('form');
    const textarea = document.getElementById('tar');
    const button = document.getElementById('btn');

    // Load any saved data from localStorage
    textarea.value = localStorage.getItem('textareaValue') || '';

    // Add an event listener to the form to handle the submit event
    form.addEventListener('submit', function(event) {
        // Prevent the default form submit action
        event.preventDefault();
        
        // Save the textarea value to localStorage
        localStorage.setItem('textareaValue', textarea.value);
        
        // Optionally, show a message or do something else to indicate success
        alert('Text saved!');
    });
});