fix storage issue

src/background.js

@@ -4,15 +4,14 @@ import { settings, oTabData } from './assets/default-data.json';
 global.browser = require('webextension-polyfill');
 
 browser.runtime.onInstalled.addListener(async () => {
-  console.log(settings)
-  let storage = browser.storage.local;
-  let data = await browser.storage.sync.get('oTabData');
-  browser.storage.sync.set({
-    oTabSettings: settings
+  let storage = browser.storage.sync;
+  let data = await storage.get('oTabData');
+  browser.storage.local.set({
+    myGallery: []
   })
   storage.set({
+    oTabSettings: settings,
     homeCollection: 'primary_board=>0',
-    myGallery: [],
     starBoard: '',
     oTabMenu: '0',
   });

src/mixins/star-board.js

@@ -1,10 +1,10 @@
 export default {
   methods: {
     staredBoard(boardId) {
-      this.$browser.storage.local.get('starBoard').then(data => {
+      this.$browser.storage.sync.get('starBoard').then(data => {
         let boardData = boardId === data.starBoard ? '' : boardId;
         this.$store.commit('starBoard', boardData);
-        this.$browser.storage.local.set({ starBoard: boardData });
+        this.$browser.storage.sync.set({ starBoard: boardData });
       });
     },
   },

src/popup/App.vue

@@ -27,7 +27,7 @@ export default {
     isUrl: false,
   }),
   async created() {
-    let storage = this.$browser.storage.local;
+    let storage = this.$browser.storage.sync;
     let data = await storage.get(['oTabData', 'starBoard']);
     this.isEmpty = data.oTabData.boards.length === 0 ? true : false;
     this.$store.dispatch('initData', { data, isEmpty: this.isEmpty });
@@ -38,7 +38,7 @@ export default {
       handler(val) {
         if (!this.$store.state.firstChange) {
           this.allData.boards.length === 0 ? (this.isEmpty = true) : (this.isEmpty = false);
-          this.$browser.storage.local.set({ oTabData: this.allData });
+          this.$browser.storage.sync.set({ oTabData: this.allData });
         }
       },
       deep: true,

src/tab/App.vue

@@ -53,7 +53,7 @@ export default {
       handler(val) {
         if (!this.$store.state.firstChange) {
           this.allData.boards.length === 0 ? (this.isEmpty = true) : (this.isEmpty = false);
-          this.$browser.storage.local.set({ oTabData: this.allData });
+          this.$browser.storage.sync.set({ oTabData: this.allData });
         }
       },
       deep: true,
@@ -80,12 +80,11 @@ export default {
   async created() {
     let storage = this.$browser.storage;
     let store = this.$store;
-    let data = await storage.local.get(['oTabData', 'oTabMenu', 'oTabSettings', 'starBoard', 'homeCollection']);
+    let data = await storage.sync.get(['oTabData', 'oTabMenu', 'oTabSettings', 'starBoard', 'homeCollection', 'oTabSettings']);
     //Active Menu
     store.commit('activeMenu', data.oTabMenu);
-    let settings = await storage.sync.get('oTabSettings')
-    this.$store.commit('settings/changeSettings', settings.oTabSettings)
-    this.dark = settings.oTabSettings.dark;
+    this.$store.commit('settings/changeSettings', data.oTabSettings)
+    this.dark = data.oTabSettings.dark;
     // Check if board empty
     this.isEmpty = data.oTabData.boards.length === 0 ? true : false;
     // if board not empty set all data

src/tab/components/board-card.vue

@@ -52,10 +52,10 @@ export default {
   },
   methods: {
     staredBoard(boardId) {
-      this.$browser.storage.local.get('starBoard').then(data => {
+      this.$browser.storage.sync.get('starBoard').then(data => {
         let boardData = boardId === data.starBoard ? '' : boardId;
         this.$store.commit('starBoard', boardData);
-        this.$browser.storage.local.set({ starBoard: boardData });
+        this.$browser.storage.sync.set({ starBoard: boardData });
       });
     },
     clearAll() {

src/tab/components/home.vue

@@ -63,7 +63,7 @@ export default {
     },
     clearTabs() {
       this.$store.commit('homeCollection', '');
-      this.$browser.storage.local.set({ homeCollection: '' });
+      this.$browser.storage.sync.set({ homeCollection: '' });
     },
     openHomeSettings() {
       Bus.$emit('settings', 'home');

src/tab/components/menu.vue

@@ -133,7 +133,7 @@ export default {
       this.$store.commit('activeTag', tag.id);
     },
     changeActiveTab(index) {
-      this.$browser.storage.local.set({ oTabMenu: index });
+      this.$browser.storage.sync.set({ oTabMenu: index });
       this.$store.commit('activeMenu', index);
     },
     activeBoardChange(id) {

src/tab/components/settings/home-settings.vue

@@ -13,9 +13,6 @@
           <el-option class="capitalize" v-for="category in photoCategories" :key="category" :value="category" :label="category"></el-option>
         </el-select>
       </div>
-      <div class="limit-storage" v-else>
-        <div class="bar" :style="{ width: storageLimit }"></div>
-      </div>
     </div>
     <div class="home-settings__content">
       <transition name="slide-fade-left" mode="out-in">
@@ -56,23 +53,13 @@ export default {
     settings: Object,
   },
   data: () => ({
-    storageLimit: 0,
     myGallery: [],
     imageSize: '?auto=compress&cs=tinysrgb&dpr=2&h=492&w=328',
     type: 'photos',
     category: 'all',
     backgroundTypes: ['photos', 'my gallery'],
     photoCategories: ['all', 'space', 'mountain', 'city', 'nature', 'sky'],
   }),
-  watch: {
-    myGallery: {
-      handler(gallery) {
-        this.storageUse();
-        this.$browser.storage.local.set({ myGallery: this.myGallery });
-      },
-      deep: true,
-    },
-  },
   methods: {
     deleteGallery(index) {
       this.myGallery.splice(index, 1);
@@ -81,6 +68,7 @@ export default {
       this.$emit('change', { key: 'homeBackground', value: image });
       if (!this.myGallery.some(gallery => gallery.url === image.url)) {
         this.myGallery.push(image);
+        this.$browser.storage.local.set({ myGallery: this.myGallery });
       }
     },
     onDrop(event) {
@@ -96,11 +84,6 @@ export default {
       let files = event.target.files;
       this.createFile(files[0]);
     },
-    storageUse() {
-      this.$browser.storage.local.getBytesInUse('myGallery').then(used => {
-        this.storageLimit = parseFloat((used / (1024 * 1024)).toFixed(2)) / 5;
-      });
-    },
     async createFile(file) {
       if (!file.type.match('image.*')) {
         this.$message.error('Select an image');
@@ -116,6 +99,7 @@ export default {
         url: dataUrl,
         author: '',
       });
+      this.$browser.storage.local.set({ myGallery: this.myGallery });
     },
   },
   computed: {
@@ -128,9 +112,13 @@ export default {
     },
   },
   async created() {
-    this.storageUse();
     const gallery = await this.$browser.storage.local.get('myGallery');
-    this.myGallery = gallery.myGallery;
+    if(gallery.myGallery.length >= 1 && typeof gallery.myGallery[0].url === 'undefined'){
+      this.$browser.storage.local.remove('myGallery')
+      this.$browser.storage.local.set({myGallery: []})
+    }else{
+      this.myGallery = gallery.myGallery;
+    }
   },
 };
 </script>
@@ -140,18 +128,6 @@ export default {
 
 @include slideTransition(left, -10px, 0.3s);
 
-.limit-storage {
-  @include themify($themes) {
-    background-color: themed('bg-color2');
-  }
-  border-radius: 30px;
-  .bar {
-    border-radius: 30px;
-    height: 10px;
-    background-color: #409eff;
-  }
-  width: 250px;
-}
 
 .my-gallery {
   &__content {

src/tab/views/collections.vue

@@ -116,7 +116,7 @@ export default {
     addHomeCollection(collectionIndex) {
       let activeBoard = this.$store.state.activeBoard;
       const collectionId = `${activeBoard}=>${collectionIndex}`;
-      this.$browser.storage.local.set({ homeCollection: collectionId });
+      this.$browser.storage.sync.set({ homeCollection: collectionId });
       this.$store.commit('homeCollection', collectionId);
       this.$message.success('Add collection to home');
     },