[ jquery ] localStorage 사용법

localStorage란?

자바스크립트, jquery를 사용하여 작업을 할 때, 데이터를 db에 저장해서 사용할 수도 있지만
브라우저에 저장시키는 방법이다.

 

나의 경우, 메뉴별로 다르게 css를 적용할 상황이 생겼는데 다른 방법도 있겠지만
header.html 파일을 만들고 script로 각 페이지마다 header.html은 jquery로 함께 로딩을 하는데
이럴 경우, header에 있는 메뉴 css를 각 페이지로 이동할 때마다 새로고침되어
적절한 방법이 떠오르지 않아
localStorage를 어제 어쩌다 보았었기에 이것을 활용해보았다.

 

 

 

각 페이지에 접속할 때마다 아래와 같이 name이라는 변수에 value를 페이지마다 다르게 셋팅을 해주었다.

localStorage.setItem('name', 'value');

 

 

 

그리고 header.html에서는

localStorage.getItem('name');

을 사용하여 값을 추출하였다.

 

 

 

 

 

최종적으로 아래와 같이 코드를 작성하여 작업을 완료하였다.

 

 

 

 

 

 

 $(function(){
    var num = localStorage.getItem('menu_num');
    console.log('header : ' + num);

    $('body .css-11g9kr1:nth-child(' + num + ') .css-ansj8q').css({
        'background-color': 'rgb(210, 210, 210)', 'font-weight': 'bold'});
});

위 코드는 공통적으로 사용할 header.html 파일에 만들어서 사용하였다.