localstorage 사용법 ajax 예제 example

로컬스토리지(localstroage)란?

웹브라우저 저장공간으로 로그인 상태를 유지하기 위한 token을 저장하거나,

웝사이트에서 사용자가 작업한 내용을 일시적으로 유지하기 위한 용도로 사용된다.

 

session과 차이?

https://it-eldorado.tistory.com/90

[Web] 쿠키, 웹 스토리지 (로컬 스토리지, 세션 스토리지)

localstorage에 저장하는법

key와 value를 받아 브라우저에 저장하여 불러온다.

		$("#submit_Button").click(function(){
				localStorage.setItem('key1', $('#mobile_no').val())
				localStorage.setItem('addr_no', $('#addr_no2').val())
			})
		}

localstorage를 쓰는법

		var key1 = localStorage.getItem('key1');
		$('#mobile_no').val(key1);

ajax

		var local_addr_no = localStorage.getItem('addr_no');
        
		var selectBox1 = $.ajax({
			url: '/api/v2.0/addr/0',
			//url: './static/js/addr1.json',
			dataType: 'json',
			type: 'get',
			cache: false, //캐시데이타
			success: function (data) {
				$('#addr_no1').empty();
				$(data.resultData).each(function (index, value) {
				//$(data.addr1).each(function (index, value) {
					$('#addr_no1').append('<option value="' + value.addr_no + '">' + value.addr_name + '</option>')
				});
				if (local_addr_no != null) {
					addr_no1 = local_addr_no.substr(0,2) + '000'; // 시/군 코드 만들기
					$("#addr_no1").val(addr_no1).prop("selected", true);
					reload_addr_no2();
				}
				else
					reload_addr_no2(1);
			}
		});

확인

크롬 관리자모드 localstorage확인

 

[심화]

뱅크샐러드 Typescript로 localstorage를 보다 안전하게 사용하기

https://blog.banksalad.com/tech/typescript-local-storage/?gclid=CjwKCAjwieuGBhAsEiwA1Ly_nXQidH5OrJLoAlNco3NNfUv0VTcRrDCJKNdOaIf8tp4FeDfKVCHn4xoCmwsQAvD_BwE 

Typescript로 Local Storage 안전하게 사용하기 | 뱅크샐러드