D35_網頁session與cookie的記錄與儲存的操作

14th鐵人賽 p5.js

jasonlee2357

2022-10-19 02:44:09

1618 瀏覽

分享至

網頁session與cookie的記錄與儲存的操作

今天來整理有關網頁中，使用session興cookie的操作

首先先來了解一下，在網頁中，有3個儲存資料的方式，第1種是由使用者下載存檔，第2種是上傳到server的php儲存在server中，第3種是儲存在瀏覽器中。
這次要來說明一下 localStorage, sessionStorage 與 cookie

sessionStorage是在網頁開啟期間資料暫存的方式，一旦網頁關掉或關掉一段時間，資料就會清除
localStorage及cookie是將資料儲存在瀏覽器中，之後就會一直留在瀏覽器中，直到清除為止。
sessionStorage 及 localStorage的儲存容量是 5MB
cookie的儲存容量是 4kB

先來看p5.js提供的指令 storeItem()，getItem()，removeItem()，clearStorage()，
在p5.js提供的 storeItem()，相對於Native JS就是 localStorage，會儲存在瀏覽器中

localStorage

storeItem(key, value) -> localStorage.setItem(key, value);
getItem(key) -> localStorage.getItem(key);
removeItem(key) -> localStorage.removeItem(key);
clearStorage() -> localStorage.clear();

sessionStorage

sessionStorage.setItem(key, value);
sessionStorage.getItem(key);
sessionStorage.removeItem(key);
sessionStorage.clear();

cookie

設定cookie

document.cookie = "key=value";

如果要設定多個cookie值的話，一次只能設定一個cookie, 就要分多次設定
document.cookie = "cookie1=value";
document.cookie = "cookie2=value";
document.cookie = "cookie3=value";

key=value 是設定參數對
expires=Thu, 18 Dec 2013 12:00:00 UTC 是設定cookie有效期限
path=/ 是設定cookie有效的路徑

時間的設定可以用JS的 Date物件

let date1 = new Date(2022, 12, 31);
document.cookie = "key=value; expires="+date1.toUTCString();

讀取cookie
let txt ＝ document.cookie;
回傳值會以分號分隔多個cookie
cookie1=value; cookie2=value; cookie3=value

清除cookie

let expires = new Date(1970, 1, 1);
document.cookie = "key=; expires="+expires.toUTCString();

清除多個cookie，同樣要分多次清除

let expires = new Date(1970, 1, 1);
document.cookie = "cookie1=; expires="+expires.toUTCString();
document.cookie = "cookie2=; expires="+expires.toUTCString();
document.cookie = "cookie3=; expires="+expires.toUTCString();

let st = 1;
function setup() {

	console.log("start");

	let expires = new Date(1970, 1, 1);
	console.log(expires.toUTCString());

	document.cookie = "id=123";  //-- 設定cookie id數值
	document.cookie = "name=Jason";
	//document.cookie = "id=; expires="+expires.toUTCString();  //-- 清除cookie id數值
	//document.cookie = "name=; expires="+expires.toUTCString();
	
	localStorage.setItem("id", "123");  //-- 設定localStorage id數值
	sessionStorage.setItem("id", "123");  //-- 設定sessionStorage id數值

    console.log(document.cookie);  //--  id=123; name=Jason
	let para = document.cookie.split(";").map( x => x.trim()).join("&");
    console.log(para);  //-- id=123&name=Jason

	let urlParams = new URLSearchParams(para); //-- 分解成參數對物件
	console.log(urlParams);
	console.log(urlParams.get('id'));  //-- 123
	console.log(urlParams.get('name'));  //-- Jason
    
	console.log(localStorage);
	console.log(sessionStorage);
    
    //-- DOM的方法
    console.log(location.search);
	let urlParams1 = new URLSearchParams(location.search);
	console.log(urlParams1.get('id'));
	console.log(urlParams1.get('name'));
    
    //-- p5.js的方法
	console.log(getURL());  //-- http://localhost:3000/index.html?id=123&name=Jason
	console.log(getURLPath()[0]); //-- index.html
	let params = getURLParams();
	console.log(params); //--  {id: '123', name: 'Jason'}
	console.log(params.id);  //--  123
	console.log(params.name);  //--  Jason

}

function draw(){
	if(st==1){
	  st = 0;
      txt = getItem("id");  //-- 讀取localStorage的id參數
	  console.log("text: "+getItem("id"));
	  console.log("localStorage: "+localStorage.getItem("id"));
	  console.log("sessionStorage: "+sessionStorage.getItem("id"));
	  console.log("cookie: "+document.cookie);
    }
}

function keyPressed(e) {
	st = 1;
	if(key=='a'){
		storeItem("id", "123");
		console.log("storeItem");
	}

	if(key=='c'){
		removeItem("id");
		console.log("removeItem");
	}

	if(key=='q'){
		clearStorage();
		console.log("clearStorage");
	}
}

其中
let para = document.cookie.split(";").map(x => x.trim()).join("&");
先將參數對，以 ";" 切分成陣列 -> ["id=123", " name=Jason"]
x => x.trim() 是將陣列每個元素先trim掉多餘空白字元，再以"&"組合成參數對字串
-> id=123&name=Jason
再以 let urlParams = new URLSearchParams(para); 分解成參數對物件
這樣就可以直接以 urlParams.get(key) 讀取 cookie的內容了
console.log(urlParams.get('id')); //-- 123
console.log(urlParams.get('name')); //-- Jason

new URLSearchParams(para)這個方法也可以用在URL的參數對的解析
URL的參數對可以用 location.search 讀取
再用 URLSearchParams分解成參數對物件
let urlParams = new URLSearchParams(location.search);

例如：URL為 http://localhost:3000/index.html?id=123&name=Jason
location.search -> ?id=123&name=Jason
console.log(urlParams.get('id')); //-- 123
console.log(urlParams.get('name')); //-- Jason

另外p5.js也有提供對應的方法

console.log(getURL());  //-- http://localhost:3000/index.html?id=123&name=Jason
console.log(getURLPath()[0]); //-- index.html
let params = getURLParams();
console.log(params); //--  {id: '123', name: 'Jason'}
console.log(params.id);  //--  123
console.log(params.name);  //--  Jason

執行的結果

Dictionary

另外p5.js也提供處理參數對的物件 Dictionary
createStringDict() -> p5.StringDict Extends p5.TypedDict
createNumberDict() -> p5.NumberDict Extends p5.TypedDict

因為 p5.StringDict 及 p5.NumberDict 都是繼承自 p5.TypedDict
Dictionary 的操作可以參考 p5.TypedDict的方法

function setup() {

	let dic_str = createStringDict('p5', 'js');  //-- p5.StringDict Extends p5.TypedDict
	dic_str.create('happy', 'coding');  //-- 新增參數
	dic_str.set('p5', 'JS');  //-- 修改參數內容 
    dic_str.create({ name: 'jason', id: '123' }); //-- 以物件新增參數
	console.log(dic_str);

    console.log("dic_str size: "+dic_str.size());
    console.log("dic_str hasKey('p5'): "+dic_str.hasKey('p5'));
    console.log("dic_str get('p5'): "+dic_str.get('p5'));
   
    //dic_str.remove('p5');  //-- 移除 "p5" 參數
    //dic_str.clear();   //-- 移除全部參數
	console.log(dic_str.data);  //-- 輸出物件資料 {"p5":"JS","happy":"coding"}
    console.log(JSON.stringify(dic_str.data));  
    //-- 輸出物件資料 {"p5":"JS","happy":"coding"}

	dic_str.print(); //-- 輸出所有參數內容 
	//-- key:p5 value:JS
    //-- key:happy value:coding
    
    console.log(dic_str.data.p5);  //-- JS
	console.log(dic_str.data.happy);  //-- coding

	console.log(Object.keys(dic_str.data));  //-- ['p5', 'happy']
	console.log(Object.values(dic_str.data));  //-- ['JS', 'coding']

    //dic_str.saveTable('dic_str');   //-- 輸出儲存 dic_str.csv
    //dic_str.saveJSON('dic_str');    //-- 輸出儲存 dic_str.json

	let dic_type = new p5.TypedDict('p5', 'js');  //-- p5.TypedDict
	dic_type.create('happy', 'coding');
	console.log(dic_type);

	let dic_num = createNumberDict(100, 42);  //-- p5.NumberDict Extends p5.TypedDict
	console.log(dic_num);

}

其中 dic_str.data 可以讀取 StringDict 物件資料 {"p5":"JS","happy":"coding"}

執行結果
StringDict 物件資料