點燈坊

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

使用 clearStorage() 清除所有 Local Storage

Sam Xiao's Avatar 2020-08-27

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

Version

macOS Catalina 10.15.6
Wink-fp 1.23.0

Functional

clear000

按下 Clear Local Storage 會移除所有 local storage。

<template>
  <div>
    <button @click="onClear">Clear Local Storage</button>
  </div>
</template>

<script>
import { bind } from 'ramda'

let clearStorage = bind(localStorage.clear, localStorage)

let onClear = function() {
  clearStorage()
}

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

10 行

let clearStorage = bind(localStorage.clear, localStorage)

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

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

12 行

let onClear = function() {
  clearStorage()
}

clearStorage() 為 free function。

Wink-fp

<template>
  <div>
    <button @click="onClear">Clear Local Storage</button>
  </div>
</template>

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

let onClear = function() {
  clearStorage('name')
}

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

第 8 行

import { clearStorage } from 'wink-fp'

let onClear = function() {
  clearStorage('name')
}

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

clearStorage()
() -> void
localStorae.clear() 的 free function 版本

()：不用傳入任何值

void：沒有回傳值

Vue 3

<template>
  <button @click="onClear">Clear Local Storage</button>
</template>

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

let onClear = clearStorage

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

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

第 9 行

let onClear = clearStorage

將 clearStorage() 指定給 onClear() method 即可。

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.clear()

# Wink-fp