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

Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Email

前言

電腦程式中常常要操作資料 (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);

在這個例子中,我們將資料存在 iddata 的網頁元素中。儲存時以 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';

在這個範例程式中,我們在 iddata 的網頁元素上寫入三個 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 算是最理想的暫時性資料處理方法,但不一定每個瀏覽器都支援得很好 (參考這裡)。

結語

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

關於作者

身為資訊領域碩士,美思認為開發應用程式的目的是為社會帶來價值。如果在這個過程中該軟體能成為永續經營的項目,那就是開發者和使用者雙贏的局面。

美思喜歡用開源技術來解決各式各樣的問題,但必要時對專有技術也不排斥。閒暇之餘,美思將所學寫成文章,放在這個網站上和大家分享。