텍스트 강조 기능은 사용자가 웹 페이지에서 특정 텍스트를 강조하여 더욱 빠르게 찾을 수 있도록 도와주는 기능입니다. 이번에는 자바스크립트의 Local Storage를 활용하여 텍스트 강조 기능을 개발하는 방법에 대해 알아보겠습니다.

Local Storage란?

Local Storage는 웹 브라우저에 데이터를 저장하기 위한 HTML5의 기능입니다. Local Storage는 웹 페이지를 새로고침하거나 브라우저를 종료해도 데이터를 유지할 수 있으므로, 임시적인 데이터 저장에 적합합니다.

기능 구현 방법

우리의 텍스트 강조 기능은 사용자가 웹 페이지에서 특정 텍스트를 강조하면, 해당 텍스트가 Local Storage에 저장되고, 페이지를 새로고침하거나 다시 접속했을 때도 강조 효과를 유지할 수 있도록 구현됩니다.

1. 사용자 입력 받기

사용자가 텍스트를 입력하고 ‘강조’ 버튼을 클릭하면, 자바스크립트 함수가 실행되어 텍스트 입력 값을 가져옵니다.

function getTextHighlight() {
    var text = document.getElementById("text-input").value;
    // 텍스트 강조 기능 호출
    highlightText(text);
}

2. 텍스트 강조 기능 구현

highlightText() 함수는 다음과 같이 구현됩니다. 이 함수는 localStorage에 텍스트를 저장하고, 저장한 텍스트를 기반으로 웹 페이지에서 텍스트를 강조합니다.

function highlightText(text) {
    // Local Storage에 텍스트 저장
    localStorage.setItem("highlightedText", text);
    
    // 텍스트 강조
    var elements = document.getElementsByTagName("p");
    for (var i = 0; i < elements.length; i++) {
        var paragraph = elements[i];
        var highlighted = paragraph.innerHTML.replace(text, "<span class='highlight'>" + text + "</span>");
        paragraph.innerHTML = highlighted;
    }
}

3. 페이지 로딩 시 텍스트 강조 적용

페이지가 로딩될 때, 저장된 텍스트가 있는지 확인하고, 있다면 해당 텍스트를 사용하여 강조 효과를 적용합니다.

window.onload = function() {
    var highlightedText = localStorage.getItem("highlightedText");
    if (highlightedText) {
        highlightText(highlightedText);
    }
}

위와 같이 구현하면 사용자가 텍스트를 강조하고 웹 페이지를 새로고침하거나 다시 접속해도, 강조한 텍스트가 유지될 수 있게 됩니다.

마무리

이번 글에서는 자바스크립트 Local Storage를 활용하여 텍스트 강조 기능을 개발하는 방법에 대해 알아보았습니다. Local Storage를 사용하면 웹 페이지에서 데이터를 영구적으로 저장하고 활용할 수 있습니다. 다양한 용도로 활용하여 사용자들에게 편리한 경험을 제공할 수 있습니다. 자세한 내용은 공식 문서를 참고하시기 바랍니다.

#javascript #Localstorage #텍스트강조