SW정리: python flask jquery and cookie(jquery로 만드는 cookie 테스트)

쿠키(cookie)란

인터넷 사용자가 어떠한 웹사이트를 방문할 경우 웹 브라우저를 통해 저장되는 정보를 쿠키, 웹 쿠키, 브라우저 쿠키라고 한다.

말이 어려운데 쇼핑몰의 장바구니를 생각해보면 좋을것 같습니다. 쇼핑몰에서 제품을 클릭할때 서버에 정보를 기록하는 것이 아닌 사용자의 PC에 임시로 저장하는 용도입니다.

JQuery plugin으로 쉽게 제어 가능하며 예제를 통해 알아 보도록 하겠습니다.

jquery-cookie 플러그인 설치

cdnjs(https://cdnjs.com/)사이트에서 'jquery-cookie'를 검색하여 url을 복사하면 아래와 같은 코드를 얻을 수 있습니다. 이것을 html script 부분에 추가해줍니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js" integrity="sha512-3j3VU6WC5rPQB4Ld1jnLV7Kd5xr+cq9avvhwqzbH/taCRNURoeEpoPBK9pDyeukwSxwRPJ8fDgvYXd6SkaZ2TA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

쿠기 만들기

세션 쿠키 생성 - 브라우저를 닫으면 없으집니다.
$.cookie('name', 'value');

7일 뒤에 만료되는 쿠키 생성
$.cookie('name', 'value', { expires:7 });

전체 사이트에 대해 7일 뒤에 만료되는 쿠키 생성
$.cookie('name', 'value', { expires:7, path: '/' });

쿠키 읽기

키로 사용한 이름으로 값을 읽습니다.
키로 저장된 값이 없으면 undefined 가 반환됩니다.
$.cookie('name'); // => "value"
$.cookie('nothing'); // => undefined

모든 쿠키 읽기
모든 쿠키를 { "name": "value" } 형태의 객체로 반환합니다.
$.cookie(); // => { "name": "value" }

쿠키 삭제하기

성공적으로 삭제되면 true 를 반환하고, 삭제 못했을때는 false를 반환합니다.
$.removeCookie('name'); // => true
$.removeCookie('nothing'); // => false

쿠키 삭제시 생성할때 와 같은 path와 domain 을 사용해야 합니다.
$.cookie('name', 'value', { path: '/' });
$.removeCookie('name', { path: '/' });

flask 예제

base가 되는 예제는 flask를 이용하여 간단한 계산기를 만든 예제입니다. 여기에서 계산 하는 부분은 python으로 구현이 되어 있는데 cookie를 이용하여 마지막 계산했던 문장을 저장해서 다음번 접속할때 그대로 보여주도록 제작하였습니다.

base 예제 설명

https://swlock.blogspot.com/2021/12/python-flask-processing.html

python flask 소스

import time
from flask import Flask
from flask import request
from flask import render_template
from flask import jsonify

app = Flask(__name__)

@app.route("/")
def index():
   return render_template('input_form_loading_wc.html')

@app.route("/ajax_page", methods=['POST'])
def ajax_page():
   data = request.get_json()
   print(data)
   calc_result = calc(data['inputdata'])
   rdata = {}
   rdata['inputdata']=data['inputdata']
   rdata['rlt']=calc_result
   print(rdata)
   return jsonify(rdata)

def calc(inputdata):
   print("calc")
   time.sleep(10)
   return str(eval(inputdata))

if __name__ == "__main__":
   app.run(port=8080, debug=True)

templates/imput_form_loadin_wc.html 소스

<!--https://api.jquery.com/click/-->
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>calc flask demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js" integrity="sha512-3j3VU6WC5rPQB4Ld1jnLV7Kd5xr+cq9avvhwqzbH/taCRNURoeEpoPBK9pDyeukwSxwRPJ8fDgvYXd6SkaZ2TA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>

<input type="text" id="txt1" name="inputdata"></input>
<button id="btn1">submit</button>

<div id="result1">
</div>

</p>

<script>
$( document ).ready(function() {
    <!--for debugging $.removeCookie('save_val1', { path: '/' });-->
    var cookie_val1 = $.cookie('save_val1')
    console.log( "ready!" );
    console.log( cookie_val1 );
    <!--undefined-->
    if (cookie_val1==undefined) {
        $('#txt1').val( "0" )
    }else{
        $('#txt1').val( cookie_val1 )
    }
});

$( "#btn1" ).click(function() {
	var txt1_v = $('#txt1').val();
	var postdata = {
		'inputdata':txt1_v
	}
	$.cookie('save_val1',txt1_v,{expires:7,path:'/'})
	$("#result1").text("processing...")
	<!--alert( "Handler for .click() called." );-->
	$.ajax({
		type: 'POST',
		url: '{{url_for("ajax_page")}}',
		data: JSON.stringify(postdata),
		dataType : 'JSON',
		contentType: "application/json",
		success: function(data){
			$("#result1").text("result:"+data['inputdata'] + '=' + data['rlt']);
			<!--alert('success :' + data['inputdata'] + '=' + data['rlt'])-->
		},
		error: function(request, status, error){
			alert('ajax error:['+status+']['+error+']')
		}
	})
});

</script>
 
</body>
</html>

소스 설명

이번에 추가된된 핵심 코드 부분만 설명 하도록 하겠습니다.

python 쪽은 수정 사항이 없다고 보면 되고 html의 script section만 변경되었습니다.

header에 cookie 를 사용하기 위한 script 부분이 추가되었습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"

그리고 script 안쪽에 쿠키 값을 읽어오는 부분이 추가했습니다.

var cookie_val1 = $.cookie('save_val1')

만약 읽은 값이 없는 경우 undefined 값이 들어오는데 이때 0 이 입력되도록 처리했습니다.

if (cookie_val1==undefined) {
    $('#txt1').val( "0" )
}else{
    $('#txt1').val( cookie_val1 )
}

submit 버튼을 누르게 되면 cookie에 값을 저장하는 코드를 넣었습니다.

$.cookie('save_val1',txt1_v,{expires:7,path:'/'})

해당 쿠키는 7일의 유효 기간을 가지도록 처리했습니다.

또한 쿠키값을 삭제할 필요가 있어서 필요할 때 삭제 하기 위해서 주석 형태로 추가 하였습니다.

<!--for debugging $.removeCookie('save_val1', { path: '/' });-->

SW정리

2022년 10월 30일 일요일

python flask jquery and cookie(jquery로 만드는 cookie 테스트)