JavaScript localStorage(), 지난 검색어 제공하기

<form>을 사용하여 그 안에 <input type=“search”/>를 사용하면 검색기록이 남아 ‘자동완성’기능을 제공 해 준다. 하지만, 이대로 쓰면 자체 페이지 내에서만 검색이 되기에 지금 사용하고 있는 여러 검색기에 적용하기 힘들다. 이에,

 

localStorage()를 이용 사용자 검색 기록을 저장하는 북마크 기능을 달기로 하였다.

물론 배열을 응용하여 각 객체를 <div>로 묶은 뒤 지우기 버튼을 첨부하여 기존의 즐겨찾기 기능을 구현하면 되지만... 그렇게 까지 해서, 뭘하고자 하는 의지가 없음으로 그저 북마크 순서대로 저장하는 간단한 기능을 구현하기로 했다.

 

참고로, localStorage()와 sessionStorage()의 차이점은 브라우저를 종료하고 난 뒤에도 값을 저장하는가 이다. localStorage()는 간단하게 캐쉬를 생각하면 쉬운데, html 5에서 제공하는 간단하고도 쉬운 스펠이다.

 

사용법은,

고루한 방법으로

localStorage.setItem();

localStorage.getItem();

localStorage.removeItem();

이 있고,

좀 간단한 방법으로

var key_Value=localStorage.키네임;

localStorage.키네임;

 

이 있다.

데이터베이스를 배운 사람에게는 간단한 내용이지만, 초보자들에게 굳이 설명하자면, 특정 key에 value를 넣는 작업이라 생각하면 된다. 변수에 변수 값 넣는다 생각해도 좋다.

 

이 스펠로 인해 저장 되는 값은 사용자의 컴퓨터임으로 정준영이나 승리가 될 걱정은 하지 않아도... 아, 수리기사에게 맡기면 안되지... 요즘은 컴퓨터도 함부러 외부 수리기사에게 맡기면 안되고 버릴 때도 완전히 분쇄해서... 양도 할 때나 중고로 팔 때는... 여튼 유명인이라면 조심 해야 한다. 거기에서 야동 찌끄레기라도 나오면... 정치에 몸 담든 연예계에 몸 단든 거기에서 나와야 한다. 중국폰이 백도어로 욕을 먹지만... 삼성이나 엘지, 애플이라도 수리 기사 손에 들어가는 순간!

 

결과값 :

위의 사진은 초기버전이다. 북마크를 누르면 왼쪽에서 오른쪽으로 로테이션식으로 저장 되도록 만들었으나... 가는데는 순서가 없어 지정 해서 저장하도록 만들었다.

대표적으로 만화/웹툰 검색기에 적용 해 보았다.(오른쪽 왼쪽하단 오로치마루 참조) 

이를 응용하여 지금은 북마크 기능을 부여 했는데, 괜찮다 싶으면 전체 검색기에 적용 할 생각이다. 북마크 기능을 잠깐 설명하자면, 기존의 검색창에 저장 하고자 하는 검색어를 입력하고 저장하고 싶은 번호(1~5)를 지정 저장하면 된다. 여기다 쪽수까지 지정해서 저장 할 수 있다. 완결 된 것은 양이 많아 쪽수를 저장 해야 한다. 북마크(즐겨찾기) 버튼을 눌러 즐긴 뒤 쪽수만 기입하여 북마크 버튼을 누르면, 자동으로 해당 북마크에 쪽수만 저장되는 시스템이다.

한계점이라 하면, 실시간 반영이 안 된다는 것이다. 자바스크립트 상에는 분명 값이 변경 되어 정상적으로 작동 되지만, 어디까지나 html 상에서 입력 된 내용은 새로고침을 하지 않는 이상 겉으로는 변경 사항이 적용되지 않는다. 물론 <iframe>을 써서 안에 별도의 공간을 만들면 될 듯하나, 티스토리는, 이 스킨은 아이프레임이 먹히지 않아 추후에 변경 할 생각이다.