點燈坊

失くすものさえない今が強くなるチャンスよ

使用 removeStorage 移除 Local Storage

Sam Xiao's Avatar 2020-08-26

Local Storage 雖可透過 Web API 的 localStorage.removeItem() 刪除，但其並非 Free Function 不適合 Function Pipeline，Wink-fp 特別包成適合 FP 的 removeStorage()。

Version

macOS Catalina 10.15.6
Wink-fp 1.23.0

Functional

remove000

按下 Remove Local Storage 會移除 local storage。

<template>
  <div>
    <button @click="onRemove">Remove Local Storage</button>
  </div>
</template>

<script>
import { bind } from 'ramda'

let removeStorage = bind(localStorage.removeItem, localStorage)

let onRemove = function() {
  removeStorage('name')
}

export default {
  name: 'App',
  methods: {
    onRemove
  }
}
</script>

10 行

let removeStorage = bind(localStorage.removeItem, localStorage)

若使用 Web API，移除 local storage 要使用 localStorage.removeItem()，但這種 API 並非 free function 不適合 Function Pipeline。

  • 使用 bind() 從 localStorae.removeItem() 取出 free function

12 行

let onRemove = function() {
  removeStorage('name')
}

removeStorage() 為 free function。

Wink-fp

<template>
  <div>
    <button @click="onRemove">Remove Local Storage</button>
  </div>
</template>

<script>
import { removeStorage } from 'wink-fp'

let onRemove = function() {
  removeStorage('name')
}

export default {
  name: 'App',
  methods: {
    onRemove
  }
}
</script>

第 8 行

import { removeStorage } from 'wink-fp'

let onRemove = function() {
  removeStorage('name')
}

removeStorage() 實務上經常使用，Wink-fp 已經內建。

removeStorage()
String -> void
localStorae.removeItem() 的 free function 版本

String：移除 local storage 的 key

void：沒有回傳值

Vue 3

<template>
  <button @click="onRemove">Remove Local Storage</button>
</template>

<script>
import { pipe, always } from 'ramda'
import { removeStorage } from 'wink-fp'

let onRemove = pipe(
  always('name'),
  removeStorage
)

let setup = pipe(
  always({ onRemove })
)

export default {
  name:'App',
  setup
}
</script>

13 行

let onRemove = pipe(
  always('name'),
  removeStorage
)

removeStorage() 要在 Vue 3 才能發揮威力。

由於 removeStorage() 為 free function，因此可輕易整合進 Function Pipeline 中：

  • 由 always() K combinator 回傳 name
  • 使用 removeStorage() 移除 local storage

若使用 Web API 的 localStorae.removeItem()，則根本無法透過 Function Pipeline 組合出 onRemove()。

Conclusion

  • Web API 當初是以 OOP 設計，因此與 FP 格格不入，可自己將 Web API 包成 free function 方便 Function Pipeline
  • Free function 在 Vue 2 看不出威力，但在 Vue 3 因為有了 Composition API，能輕易在 Function Pipeline 內使用 free function

Reference

MDN, Storage.removeItem()

# Wink-fp