나 자신에게 보내는 편지

TLDR

2021년에 자신에게 편지를 쓰고 읽어보는 간단한 프로젝트. Click Here 💌

동기 부여

cookies과 localStorage과 같은 Web API에 대해 배우다가 아이디어가 떠 올랐습니다. 개념을 설명하기 위해 간단한 프로젝트를 만들어 보지 않겠습니까? 또한 2020년은 가혹한 해이기 때문에 미래를 반성하고 계획할 수 있는 좋은 시간입니다.

localStorage에 대한 간략한 설명

이해하고 구현하기가 정말 쉽기 때문에 쿠키보다 localStorage를 선택했습니다. 이 작은 프로젝트를 위해 작성한 코드를 사용하여 핵심 사항을 간단하게 설명하겠습니다.

도메인 및 프로토콜별 저장소 개체를 가져옵니다. 브라우저에 상주하며 만료 날짜가 없습니다.

let myStorage = window.localStorage; 

키 값 쌍을 저장하는 것은 간단합니다.

function send() {
  let myStorage = window.localStorage;
  let myLetter = document.getElementById("letter").value;
  myStorage.setItem("myLetter", myLetter);
}

값 검색이 훨씬 더 간단합니다.

function view() {
  let myStorage = window.localStorage;
  let myLetter = document.getElementById("letter");
  myLetter.value = myStorage.getItem("myLetter");
}

저장된 내용도 프로그래밍 방식으로 제거/지울 수 있습니다.

// not used in this project, for information
myStorage.removeItem('myLetter');

myStorage.clear();

localStorage에서 기존 데이터를 검사할 수도 있습니다.
(Chrome용 단계)

페이지 검사

응용 프로그램 탭 아래

로컬 저장소 및 해당 URL 아래

추가 고장

메인 로직

현재 연도가 2021년 이상인지 확인합니다. 그렇지 않은 경우 사용자는 생각을 적고 "SEAL"버튼을 눌러 편지를 저장할 수 있습니다. 그렇다면 사용자는 "보기"버튼을 클릭하여 콘텐츠를 볼 수 있습니다.

상호 작용:

문자의 내용을 입력/출력하는 텍스트 영역

저장 또는 보기 기능을 트리거하는 버튼

// setup
var isOpenDate = new Date().getFullYear() >= 2021;
var btn = document.getElementById("btn");

function activate() {
  if (!isOpenDate) {
    send();
    btn.setAttribute("disabled", "true");
    btn.innerHTML = "DONE";
  } else {
    view();
  }
}

// update button
if (isOpenDate) {
  btn.innerHTML = "VIEW";
}
btn.addEventListener("click", activate);

설계

예술적 영감을 얻기 위해 dribbble.com을 검색하다가 illustrator Christina Young의 디자인이 매우 적합하다는 것을 알았습니다. 모든 디자인 크레딧은 그녀에게 돌아갑니다!

결론

자신에게 편지를 써보세요! Click Here 💌
나는 보지 않겠다고 약속합니다(내가 할 수 있는 것은 아닙니다 😂).

코드는 여기repo에서 찾을 수 있습니다.

틀리다 / 자기 자신에게 편지

자신에게 편지를 쓰고 2021년에 받아보세요

추신
적절한 문자를 입력하려면 적절한 키보드가 필요하거나 내가 게을러서 페이지가 응답하지 않습니다. 브라우저 데이터를 지우거나 저장 및 보기에 다른 브라우저를 사용하면 문자가 지워질 수 있습니다. 기본적으로 보증/보증이 제공되지 않습니다.


나는 내년에 사람들에게 그들의 편지를 확인하도록 상기시키기 위해 기사를 작성할 것입니다. 그것은 재미있을 수 있습니다 :)