開發技巧---Vue-ls 本地儲存

Vue-ls是Vue的插件，用於從Vue上下文中使用本地Storage，會話Storage和內存Storage。

它的github：vue-ls

使用前需要安裝：npm install vue-ls

// 導入vue-ls
import Storage from 'vue-ls';
 
options = {
  namespace: 'vuejs__', // key鍵前綴
  name: 'ls', // 命名變量,通過Vue.ls全局訪問
  storage: 'local', // 存儲方式: session, local, memory
};
 
Vue.use(Storage, options);
// 或 Vue.use(Storage);
 
new Vue({
    el: '#app',
    mounted: function() {
    	// 設置存儲信息 key-value形式，內部會將value轉換爲JSON格式
        Vue.ls.set('foo', 'boo');
        // 設置有效期爲1小時
        Vue.ls.set('foo', 'boo', 60 * 60 * 1000); 
        // 獲取存儲變量中的key
        Vue.ls.get('foo');
        // 如果存儲中沒有name則返回默認值10
        Vue.ls.get('name', 10);
        
        // 持續監聽 foo 在其他標籤上的更改
        Vue.ls.on('foo', (newval, oldVal, url)=>{
        	// newval爲當前storage中的key	
        	// oldval爲舊的storage中的key
        	// url可以告訴我們 值是由哪個URL改的
			console.log('localStorage change', newval);
		}) 
		// 刪除先前的監聽器
        Vue.ls.off('foo')
    }
});

其他常用API：

Vue.ls.remove(key)：從存儲中刪除key，刪除成功返回true，失敗則返回false。

Vue.ls.clear()：清除存儲空間。