[JavaScript] Session, Local Storage 전체 조회하기

dhkim 11월 02, 2022

 


 크게 심도있는 내용은 아니지만, 혹시나 유틸적인 부분으로 계속 추가할 일이 있을 것 같아 Storage 영역의 함수들을 정리해보았습니다.

 큰 특징만 몇가지 미리 정리해봅니다.

sessionStorage : 브라우저가 종료될 경우 소실됩니다.

localStorage : 모든 브라우저가 종료되더라도 소실되지 않습니다.


__Storage.setItem(key, value) : 중복된 key값이 있는 경우 Update 됩니다.

__Storage.getItem(key) : 존재하지 않는 key값으로 호출한 경우 'null'값을 반환합니다.


1. 전체 조회

 특별한 기교없이 배열전체를 순회하며 key값을 인덱스로 갖는 배열을 반환합니다.

sessionStorage 나 localStorage는 object타입으로 Array 함수를 사용하지 못하기 때문에, 배열로 다뤄야할 경우에나 사용할 것 같습니다.

[sessionStorage]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
/**
 * 모든 세션정보 반환
 * (Key값을 인덱스로 갖는 배열)
 * 
 * @returns {Array}
 */
let GetAll = function(){

	let rtn = new Array();

	for(let key of Object.keys(sessionStorage)){
		rtn[key] = sessionStorage.getItem(key);
	}

	return rtn;
}

[localStorage]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
/**
 * 모든 세션정보 반환
 * (Key값을 인덱스로 갖는 배열)
 * 
 * @returns {Array}
 */
let GetAll = function(){

	let rtn = new Array();

	for(let key of Object.keys(localStorage)){
		rtn[key] = localStorage.getItem(key);
	}

	return rtn;
}



2. 테스트 코드

 기본적인 함수도 wrapping 되어 모듈 형태로 호출하는 코드입니다.

[호출 부]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { SessionUtil, LocalUtil } from "./999. etc/ex_userStorage.js"

(function () {
    console.log(" >>>>  main.js  <<<< ");
    
    SessionUtil.Clear();
    LocalUtil.Clear();

    SessionUtil.Insert('A' , '111');
    SessionUtil.Insert('B' , '222');
    SessionUtil.Insert('C' , '3333');

    let sessionStorageAll = SessionUtil.GetAll();


    LocalUtil.Insert('a' , '__11');
    LocalUtil.Insert('b' , '__22');
    LocalUtil.Insert('c' , '__33');

    let localStorageAll = LocalUtil.GetAll();


    debugger;

})();

[디버깅 결과]

JavaScript Storage 내용 전체조회

[session, local storage 모듈]

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
export let SessionUtil = (function(){

    /**
     * 입력함수
     * (동일 Key값으로 중복되어 들어온 경우 Update)
     * 
     * @param {*} key 
     * @param {*} value 
     */
    let Insert = function(key, value){
        sessionStorage.setItem(key, value);
    }


    /**
     * 입력 키값에 해당하는 value 반환.
     * (존재하지 않는 key는 null로 반환됨)
     * 
     * @param {*} key 
     * @returns 
     */
    let GetValue = function(key){
        return sessionStorage.getItem(key);
    }


    let Clear = function(){
        sessionStorage.clear();
    }


    let Remove = function(key){
        sessionStorage.removeItem(key);
    }

    /**
     * 모든 세션정보 반환
     * (Key값을 인덱스로 갖는 배열)
     * 
     * @returns {Array}
     */
    let GetAll = function(){

        let rtn = new Array();

        for(let key of Object.keys(sessionStorage)){
            rtn[key] = sessionStorage.getItem(key);
        }

        return rtn;
    }
    
    
    return {
        Insert: Insert,
        GetValue: GetValue,
        Clear: Clear,
        Remove: Remove,
        GetAll: GetAll
    }

})();


export let LocalUtil = (function(){

    /**
     * 입력함수
     * (동일 Key값으로 중복되어 들어온 경우 Update)
     * 
     * @param {*} key 
     * @param {*} value 
     */
    let Insert = function(key, value){
        localStorage.setItem(key, value);
    }


    /**
     * 입력 키값에 해당하는 value 반환.
     * (존재하지 않는 key는 null로 반환됨)
     * 
     * @param {*} key 
     * @returns 
     */
    let GetValue = function(key){
        localStorage.getItem(key);
    }


    let Clear = function(){
        localStorage.clear();
    }


    let Remove = function(key){
        localStorage.removeItem(key);
    }


    /**
     * 모든 세션정보 반환
     * (Key값을 인덱스로 갖는 배열)
     * 
     * @returns {Array}
     */
    let GetAll = function(){

        let rtn = new Array();

        for(let key of Object.keys(localStorage)){
            rtn[key] = localStorage.getItem(key);
        }

        return rtn;
    }


    return {
        Insert: Insert,
        GetValue: GetValue,
        Clear: Clear,
        Remove: Remove,
        GetAll: GetAll
    }
})();



0 댓글