Apps Script用Sheet生成動態網頁(12): 使用LocalStorage紀錄資料

第10篇我們處理了使用者登入token及登出功能,登入的token是透過?參數傳遞給首頁。如果使用者重新進入我們的網站,例如開新的分頁,就會發現使用者登入了,怎麼Apps Script用起來跟一般的網站登入的狀態不一樣呢?

這是因為大多數網站都使用cookie來紀錄使用者的資料,以下引用wiki關於cookie的描述

因為HTTP協定是無狀態的,即伺服器不知道使用者上一次做了什麼,這嚴重阻礙了互動式Web應用程式的實現。在典型的網路購物場景中,使用者瀏覽了幾個頁面,買了一盒餅乾和兩瓶飲料。最後結帳時,由於HTTP的無狀態性,不通過額外的手段,伺服器並不知道使用者到底買了什麼,所以Cookie就是用來繞開HTTP的無狀態性的「額外手段」之一。伺服器可以設定或讀取Cookie中包含的資訊,藉此維護使用者跟伺服器對談中的狀態。

然而Apps Script並沒有辦法使用後端cookie功能,所以我們只能透過其他替代方式來,例如前端cookie或是HTML5的LocalStroage或SessionStorage功能。因為cookie無法保護使用者隱私,以被列入不推薦使用的功能,話不多說,我們直接就學習LocalStorage。

因為LocalStorage是瀏覽器的機制,所以我們只要就只需要HTML前端部份。

1. HTML部份(前端/使用者端)

就如先前的習慣,下面我們會直接上code在開始解釋,這裡使用到的local storage函數有3個

  1. localStorage.removeItem() 用來移除資料
  2. localStorage.getItem() 用來取得資料
  3. localStorage.setItem() 用來設定資料
由於localStroage只能儲存字串資料,所以如果像是我這裡儲存陣列資料,跟讀取這列的時候都需要做一下轉換才行。

<!DOCTYPE html>
<html lang="zh-Hant">
<head><base target="_top"><meta charset="UTF-8"></head>
<body onload="updateList()">
<h1>測試儲存空間(local storage)</h1>
<form onsubmit="onAdd(event)">
<span>新增項目: </span>
<input type="text" name="item_name" required />
<button type="submit">加入</button>
</form>
<h3>儲存的資料列表</h3>
<ul class="list"></ul>
<button class="clear-values" onclick="onClear()">清除所有</button>
<script>
window.addEventListener('storage', function (event) {
updateList();
});
function updateList() {
var list = document.querySelector("ul.list")
list.innerHTML = "";
loadArray().forEach(e => {
var item = document.createElement("li");
item.innerHTML = `${e}
<button
value=${e}
onclick="removeOne(event)">
刪除
</button>`
list.appendChild(item);
});
}
function onAdd(event) {
event.preventDefault();
var form = event.target;
var array = loadArray();
array.push(form.item_name.value);
storeArray(array);
form.reset();
updateList();
}
function onClear() {
localStorage.removeItem('my-item');
// localStorage.clear();
updateList();
}
function loadArray() {
var item = localStorage.getItem('my-item');
return item ? JSON.parse(item) : [];
}
function storeArray(array) {
localStorage.setItem('my-item', JSON.stringify(array));
}
function removeOne(event) {
var value = event.target.value;
var array = loadArray();
var idx = array.findIndex(item => item === value);
if (idx >= 0) {
array.splice(idx, 1);
storeArray(array);
updateList();
}
}
</script>
</body>
</html>

上面的網頁包含一個表單與一個列表,表單的功能是與使用者互動,讓將我們能將新資料加入localstorage,以及羅列目前localstorage中儲存的項目。

在網頁載入的時候我們會使用updateList()讀取local storage內的資料。並與瀏覽器註冊監聽storage更新的事件,當有更新資料時,就會即時改變網頁內的羅列項目。Note:因為有註冊監聽事件,所以當網頁開多個分頁時,從任意一個網頁中新增刪除資料,都可以讓所有網頁的列表變更。

我們可以按下[加入]來新增項目,透過onAdd()將陣列資料從local stroage讀取出來,加入新增項目,再儲存回去local storage;而下方的[清除所有],則會呼叫onClear()來將儲存資料做清除,這裡是只針對我儲存的資料,如果要可以用localStorage.clear()來清除所有的資料。

而在羅列儲存的項目的部份,我們會在每個項目後面加上一個按鈕,就像之前在第七篇中可以讓我們刪除已上傳HTML項目一樣。

2. 展示



留言