原生 [JavaScript] 網頁程式設計：處理暫時性資料 (Temporary Data)

前言

電腦程式中常常要操作資料 (data)。本文介紹在網頁前端程式中儲存和處理暫時性資料的方式。這些資料在頁面重新載入後就會消失或歸零，只是用在記錄程式當下的狀態。

使用隱藏的網頁元素儲存資料

將資料儲存在隱藏的網頁元素是常見的手法。在儲存資料時，可以將資料以 JSON 字串的形式來儲存，就可以儲資料結構，不僅止於單一的資料。參考以下範例程式：

// Store data into a hidden HTML element.
document.getElementById('data').textContent = JSON.stringify({
  one: 'eins',
  two: 'zwei',
  three: 'drei'
});

// Retrieve data from a hidden HTML element.
let data = JSON.parse(document.getElementById('data').textContent);

在這個例子中，我們將資料存在 id 為 data 的網頁元素中。儲存時以 JSON.stringify() 將資料序列化。之後要取用資料時，再用 JSON.parse() 將資料反序列化或還原。

由於每次存取資料時都要進行序列化和反序列化，在效率上會比較差一些，資料量大時可能就不適合用這種方法。

現代瀏覽器皆支援 JSON 物件。若為了某些原因得支援舊瀏覽器，可用相關的 polyfill，像是 douglascrockford/JSON-js。

雖然在表面上使用者看不到這些資料，但這些資料可藉由瀏覽器的開發者工具輕易看到，所以這種手法只能用在非敏感性資料。

使用 HTML5 的 dataset 屬性儲存資料

利用 HTML5 的 data attribute，我們可以在網頁元素中塞資料。參考以下範例程式：

let elem = document.getElementById('data');

elem.dataset.one = 'eins';
elem.dataset.two = 'zwei';
elem.dataset.three = 'drei';

在這個範例程式中，我們在 id 為 data 的網頁元素上寫入三個 data attribute。

但 dataset 只適合塞入純量 (scalar)，不適合塞資料結構。而且不一定每個瀏覽器都有支援 dataset (參考這裡)。

使用 WeakMap 物件儲存資料

ES6 後新增的 WeakMap 物件本身就是映射 (map) 或雜湊表 (hash table)，相當適合用來暫存資料結構。參考以下範例程式：

let cache = new WeakMap();

let elem = document.getElementById('data');

cache.set(elem, {
  one: 'eins',
  two: 'zwei',
  three: 'drei'
});

let value = cache.get(elem).two;

在這個例子中，我們把網頁元素常成 WeakMap 的鍵 (key)，再放入物件實字當值 (value)。這項操作在 JavaScript 是合法的。

WeakMap 算是最理想的暫時性資料處理方法，但不一定每個瀏覽器都支援得很好 (參考這裡)。

結語

在本文中，我們介紹數種處理暫時性資料的方式，讀者可從中選擇適合自己的方式來用。