瀏覽器上的儲存空間:sessionStorage、localStorage

/

本篇要解決的問題

上一篇寫的是最常用到的 Cookie,裡面也有寫到 Cookie 通常是存有目的性的資料。如果只是想存一些不重要的資料,像是內容網站上很常會有的 放大 / 縮小 文字的按鈕,或是切換深色模式的操作,總不能使用者今天點了一次文字放大後,下次再進來頁面還得再點一次,這時就可以選擇存在瀏覽器上。

而像這種不是很重要的記錄存取,就可以選擇 localStroage。

sessionStorage 跟 localStorage 最大的差別在於,sessionStorage 是當使用者關掉了頁籤,紀錄就會消失;而 localStorage 是除非我們去刪除它,或是使用者刪除它,不然就不會過期,永遠存在。


限制

  • 限制大小:約 5 MB
  • 限制期限:sessionStorage 關閉頁籤即刪除,localStorage 要主動刪除或程式刪除
  • 資料格式:僅接受字串

瀏覽器上檢查

這邊用 Chrome 當範例。

如果想看網站上存了什麼 sessionStorage、localStorage,在網頁上點右鍵按檢查,在面板上點擊「應用程式」,就會看到「本機儲存空間(localStorage)」、「工作階段儲存空間(sessionStorage):

Chrome 上看儲存空間
Chrome 上看儲存空間

原生寫法

新增、取得、刪除 sessionStorage、localStorage 的原生寫法很簡單,整理如下。

sessionStorage

// 存
sessionStorage.setItem('key', 'value');

// 取
const ssData = sessionStorage.getItem('key');

// 刪
sessionStorage.removeItem('key');

// 全部清空
sessionStorage.clear();

localStorage

// 存
localStorage.setItem('key', 'value');

// 取
const lsData = localStorage.getItem('key');

// 刪
localStorage.removeItem('key');

// 全部清空
localStorage.clear();

設定有效期限

雖說 localStorage 是沒有期限的,但可以換一種方式讓它跟 Cookies 一樣有期限。

方式就是,我們在存一個 localStorage 時,一併存一個我們希望它過期的日期上去。

之後當我們要取用時,先拿存的日期來比對當下時間,如果存的時間較大就代表過期,就當作沒取到這個 localStorage 的資料,並把它刪除。

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

// 存值進 localStorage
function setStorageExpire({ key, value, expire }) {
  localStorage.setItem(key, JSON.stringify({
    value, expire
  }));
}

// 從 localStorage 取值
function getStorageExpire({ key }) {
  const result = JSON.parse(localStorage.getItem(key));
  const current = new Date().getTime();

  // 現在時間小於過期時間,代表還沒過期
  if(current < result.expire) {
    return result.value
  }
  // 大於就是過期
  else {
    localStorage.removeItem(key);
    return false;
  }

}

// 存一筆資料
setStorageExpire({
  key: 'demo-key',
  value: 'demo-value',
  expire: new Date('2022/11/16').getTime()
});

// 取值
const demoResult = getStorageExpire({ key: 'demo-key' });
console.log("🚀", demoResult)

推薦套件

sessionStorage、localStorage 這部份有推薦套件:proxy-web-storage

這套在 GitHub 上的星星數還沒到很多,但試用了一下覺得蠻方便的,除了可以在存的時候就存進不同的資料型別,也可以寫一個有效時間進去判斷資料是否過期。

如果懶得自己寫一個 JavaScript 來用,可以考慮直接引用。

// 先安裝 proxy-web-storage
$ npm install proxy-web-storage 或 $ yarn add proxy-web-storage

// 開始使用
import { local, session } from 'proxy-web-storage';

// number
local.demo_number = 0;

// boolean
local.demo_boolean = false;

// undefined
local.demo_undefined = undefined;

// null
local.demo_null = null;

// object
local.demo_object = { hello: 'world' };

// array
local.demo_array = ['hello'];

// Date
local.demo_Date = new Date('2000-01-01T00:00:00.000Z');

// RegExp
local.demo_RegExp = /d(b+)d/g;

// function
local.demo_function = function() {
  return 'Hello proxy-web-storage!';
};

// 過期範例
local.test = 'hello proxy-web-storage';
local.setExpires('test', Date.now() + 10000);

// 10 秒內
local.test // 'hello proxy-web-storage'

// 10 秒後到期
local.test // undefined

Demo 及原始碼

本篇一樣有製作 Demo,原始碼也放在 GitHub 上,取用之前麻煩分享本篇或點個星星,你的小小動作對本站都是大大的鼓勵。

Demo:https://letswritetw.github.io/letswrite-client-storage/

GitHub:https://github.com/letswritetw/letswrite-client-storage


瀏覽器上的儲存空間系列

Summary
瀏覽器上的儲存空間:sessionStorage、localStorage
Article Name
瀏覽器上的儲存空間:sessionStorage、localStorage
Description
本篇大綱:本篇要解決的問題。限制。瀏覽器上檢查。原生寫法、sessionStorage、localStorage。設定有效期限。推薦套件。Demo 及原始碼。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 August 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 August 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

Let's Write

前端工程師 August 的學習筆記 — solving problems, in simple ways.

Follow us Telegram GitHub