vue-ls vue本地儲存的實例講解
更新時間：2022年04月12日 08:55:04 作者：JEECG官方博客
這篇文章主要介紹了vue-ls vue本地儲存的實例講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Vue插件，用于從Vue上下文中使用本地Storage，會話Storage和內(nèi)存Storage
一個vue封裝的本地儲存的方法。
安裝
Npm
npm install vue-ls --save
Yarn
yarn add vue-ls
使用
Vue-ls Storage API
import Storage from 'vue-ls';
?
options = {
? namespace: 'vuejs__', // key鍵前綴
? name: 'ls', // 命名Vue變量.[ls]或this.[$ls],
? storage: 'local', // 存儲名稱: session, local, memory
};
?
Vue.use(Storage, options);
// 或 Vue.use(Storage);
?
new Vue({
? ? el: '#app',
? ? mounted: function() {
? ? ? ? Vue.ls.set('foo', 'boo');
? ? ? ? // 設(shè)置有效期
? ? ? ? Vue.ls.set('foo', 'boo', 60 * 60 * 1000); //有效1小時
? ? ? ? Vue.ls.get('foo');
? ? ? ? Vue.ls.get('boo', 10); // 如果沒有設(shè)置boo返回默認值10?
? ? ? ??
? ? ? ? let callback = (val, oldVal, uri) => {
? ? ? ? ? console.log('localStorage change', val);
? ? ? ? }?
? ? ? ??
? ? ? ? Vue.ls.on('foo', callback) //偵查改變foo鍵并觸發(fā)回調(diào)?
? ? ? ? Vue.ls.off('foo', callback) //不偵查
? ? ? ??
? ? ? ? Vue.ls.remove('foo'); // 移除
? ? }
});Global(全局)
Vue.ls
Context（上下文）
this.$ls
API 說明
Vue.ls.get(name, def)
返回storage中 name值。在返回之前，內(nèi)部解析JSON中的值
def: 默認null, 如果為設(shè)置則返回 name .
Vue.ls.set(name, value, expire)
在storage設(shè)置 name 的 value .并將 value 轉(zhuǎn)化為JSON
expire: 默認為 null , name 有效時間以毫秒為單位
Vue.ls.remove(name)
從storage中移除 name . 成功移除 true, 否則返回false.
Vue.ls.clear()
清除storage.
Vue.ls.on(name, callback)
持續(xù)監(jiān)聽 name 在其他標簽上的更改，更改時觸發(fā) callback , 傳遞以下參數(shù)：
newValue: 當前storage中 name , 從持久化的JSON中解析oldValue: 舊的storage中 name , 從持久化的JSON中解析url: 修改來自選項卡的URL
Vue.ls.off(name, callback)
刪除以前的偵聽器 Vue.ls.on(name, callback)
vue-ls介紹
Vue plugin for work with local storage, session storage and memory storage from Vue context.
Vue插件，用于從Vue上下文中使用localStorage，sessionStorage和memory Storage.
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解element-ui表格的合并行和列(非常細節(jié))
最近在需求中遇到了elementUI合并行,索性給大家整理下,這篇文章主要給大家介紹了關(guān)于element-ui表格的合并行和列的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue中v-show和v-if的異同 ，通過代碼詳解v-show用法，本文給大家介紹的非常詳細具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
vue3+vite使用vite-plugin-svg-icons插件顯示本地svg圖標的方法
這篇文章主要介紹了vue3+vite使用vite-plugin-svg-icons插件顯示本地svg圖標的方法,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了antd Form組件表單在vue3中的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家介紹了Vue之常用的內(nèi)置指令，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要介紹了vuex的module模塊用法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
vue刷新頁面時去閃爍提升用戶體驗效果的實現(xiàn)方法
這篇文章主要介紹了vue刷新頁面時去閃爍提升體驗方法,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-12-12
vue結(jié)合el-table實現(xiàn)表格行拖拽排序(基于sortablejs)
這篇文章主要介紹了vue結(jié)合el-table實現(xiàn)表格行拖拽排序(基于sortablejs),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-01-01
Vue.js如何利用v-for循環(huán)生成動態(tài)標簽
這篇文章主要給大家介紹了關(guān)于Vue.js如何利用v-for循環(huán)生成動態(tài)標簽的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-01-01
導入導出excel這是前端做管理系統(tǒng)最常用的功能了,下面這篇文章主要給大家介紹了基于Vue實現(xiàn)Excel解析與導出功能的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-08-08