[TOC] ## storage - 用于緩存數據 ## 示例 background/index.ts ``` import { Storage } from "@plasmohq/storage" const storage = new Storage() storage.watch({ "serial-number": (c) => { console.log("new value",c.newValue) }, make: (c) => { console.log("new value make",c.newValue) } }) ``` <details> <summary>popup.vue</summary> ``` <template> <div> <h2 class="text-center"> Welcome to your <a href="https://www.plasmo.com" target="_blank">Plasmo</a> Extension! </h2> <div class="container"> <button @click="decrement">-</button> <p> <b>{{ count }}</b> </p> <button @click="increment">+</button> </div> </div> <p v-if="action" class="action text-center"> {{ action }} </p> <a href="https://www.plasmo.com" target="_blank">123</a> </template> <script > import { Storage } from "@plasmohq/storage" const storage = new Storage() export default { data() { return { action: null, count:0, } }, mounted(){ storage.get("serial-number").then(res=> { this.count =res; }) }, methods: { increment() { this.count++ storage.set("serial-number", this.count) this.action="add" }, decrement() { this.count-- storage.set("serial-number", this.count) }, } } </script> <style> .container { min-width: 470px; display: flex; align-items: center; justify-content: center; gap: 47px; } .text-center { text-align: center; } .action { color: #470; font-weight: bold; } </style> ``` </details> <br/>