add Storage plugin as build-in plugin

example/demo1.html

@@ -40,7 +40,7 @@ <h1 class="page_title">Demo 1</h1>
 <script>
 // 初始化vConsole
 window.vConsole = new window.VConsole({
-  defaultPlugins: ['system', 'network'] // 可以在此设定要默认加载的面板
+  defaultPlugins: ['system', 'network', 'element', 'storage'] // 可以在此设定要默认加载的面板
 });
 
 console.info('欢迎使用 vConsole。vConsole 是一个由微信公众平台前端团队研发的 Web 前端开发者面板，可用于展示 console 日志，方便开发、调试。');

src/core/core.js

@@ -29,14 +29,15 @@ import VConsoleDefaultPlugin from '../log/default.js';
 import VConsoleSystemPlugin from '../log/system.js';
 import VConsoleNetworkPlugin from '../network/network.js';
 import VConsoleElementPlugin from '../element/element.js';
+import VConsoleStoragePlugin from '../storage/storage.js';
 
 const VCONSOLE_ID = '#__vconsole';
 
 class VConsole {
 
   constructor(opt) {
     if (!!$.one(VCONSOLE_ID)) {
-      console.warn('vConsole is already exists.');
+      console.debug('vConsole is already exists.');
       return;
     }
     let that = this;
@@ -363,13 +364,16 @@ class VConsole {
     const plugins = {
       'system': {proto: VConsoleSystemPlugin, name: 'System'},
       'network': {proto: VConsoleNetworkPlugin, name: 'Network'},
-      'element': {proto: VConsoleElementPlugin, name: 'Element'}
+      'element': {proto: VConsoleElementPlugin, name: 'Element'},
+      'storage': {proto: VConsoleStoragePlugin, name: 'Storage'}
     };
     if (!!list && tool.isArray(list)) {
       for (let i=0; i<list.length; i++) {
         let tab = plugins[list[i]];
         if (!!tab) {
           this.addPlugin(new tab.proto(list[i], tab.name));
+        } else {
+          console.debug('Unrecognized default plugin ID:', list[i]);
         }
       }
     }
@@ -510,7 +514,7 @@ class VConsole {
   addPlugin(plugin) {
     // ignore this plugin if it has already been installed
     if (this.pluginList[plugin.id] !== undefined) {
-      console.warn('Plugin ' + plugin.id + ' has already been added.');
+      console.debug('Plugin ' + plugin.id + ' has already been added.');
       return false;
     }
     this.pluginList[plugin.id] = plugin;
@@ -536,7 +540,7 @@ class VConsole {
     let plugin = this.pluginList[pluginID];
     // skip if is has not been installed
     if (plugin === undefined) {
-      console.warn('Plugin ' + pluginID + ' does not exist.');
+      console.debug('Plugin ' + pluginID + ' does not exist.');
       return false;
     }
     // trigger `remove` event before uninstall

src/storage/list.html

@@ -0,0 +1,12 @@
+<div>
+  <dl class="vc-table-row">
+    <dd class="vc-table-col">Name</dd>
+    <dd class="vc-table-col vc-table-col-2">Value</dd>
+  </dl>
+  {{for (var i=0; i<list.length; i++)}}
+  <dl class="vc-table-row">
+    <dd class="vc-table-col">{{list[i].name}}</dd>
+    <dd class="vc-table-col vc-table-col-2">{{list[i].value}}</dd>
+  </dl>
+  {{/for}}
+</div>

src/storage/storage.js

@@ -0,0 +1,187 @@
+/*
+Tencent is pleased to support the open source community by making vConsole available.
+
+Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+
+Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
+http://opensource.org/licenses/MIT
+
+Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+*/
+
+/**
+ * vConsole Resouces Plugin
+ */
+
+import './style.less';
+import VConsolePlugin from '../lib/plugin.js';
+import tplTabbox from './tabbox.html';
+import tplList from './list.html';
+
+import * as tool from '../lib/tool.js';
+import $ from '../lib/query.js';
+
+class VConsoleStorageTab extends VConsolePlugin {
+
+  constructor(...args) {
+    super(...args);
+
+    this.$tabbox = $.render(tplTabbox, {});
+    this.currentType = ''; // cookies, localstorage, ...
+    this.typeNameMap = {
+      'cookies': 'Cookies',
+      'localstorage': 'LocalStorage'
+    }
+  }
+
+  onRenderTab(callback) {
+    callback(this.$tabbox);
+  }
+
+  onAddTool(callback) {
+    let that = this;
+    let toolList = [{
+      name: 'Refresh',
+      global: false,
+      onClick: function(e) {
+        that.renderStorage();
+      }
+    }, {
+      name: 'Clear',
+      global: false,
+      onClick: function(e) {
+        that.clearLog();
+      }
+    }];
+    callback(toolList);
+  }
+
+  onReady() {
+    let that = this;
+
+    $.delegate($.one('.vc-sub-tabbar', that.$tabbox), 'click', '.vc-subtab', function(e) {
+      $.removeClass($.all('.vc-subtab', that.$tabbox), 'vc-actived');
+      $.addClass(this, 'vc-actived');
+
+      that.currentType = this.dataset.type;
+      that.renderStorage();
+    });
+
+    // show default list
+    this.currentType = 'cookies';
+    this.renderStorage();
+  }
+
+  clearLog() {
+    if (this.currentType && window.confirm) {
+      let result = window.confirm('Remove all ' + this.typeNameMap[this.currentType] + '?');
+      if (!result) {
+        return false;
+      }
+    }
+    switch (this.currentType) {
+      case 'cookies':
+        this.clearCookieList();
+        break;
+      case 'localstorage':
+        this.clearLocalStorageList();
+        break;
+      default:
+        return false;
+    }
+    this.renderStorage();
+  }
+
+  renderStorage() {
+    let list = [];
+
+    switch (this.currentType) {
+      case 'cookies':
+        list = this.getCookieList();
+        break;
+      case 'localstorage':
+        list = this.getLocalStorageList();
+        break;
+      default:
+        return false;
+    }
+
+    let $log = $.one('.vc-log', this.$tabbox);
+    if (list.length == 0) {
+      $log.innerHTML = '';
+    } else {
+      // html encode for rendering
+      for (let i=0; i<list.length; i++) {
+        list[i].name = tool.htmlEncode(list[i].name);
+        list[i].value = tool.htmlEncode(list[i].value);
+      }
+      $log.innerHTML = $.render(tplList, {list: list}, true);
+    }
+  }
+
+  getCookieList() {
+    if (!document.cookie || !navigator.cookieEnabled) {
+      return [];
+    }
+
+    let list = [];
+    let items = document.cookie.split(';');
+    for (let i=0; i<items.length; i++) {
+      let item = items[i].split('=');
+      let name = item[0].replace(/^ /, ''),
+          value = item[1];
+      list.push({
+        name: decodeURIComponent(name),
+        value: decodeURIComponent(value)
+      });
+    }
+    return list;
+  }
+
+  getLocalStorageList() {
+    if (!window.localStorage) {
+      return [];
+    }
+
+    try {
+      let list = []
+      for (var i = 0; i < localStorage.length; i++) {
+        let name = localStorage.key(i),
+            value = localStorage.getItem(name);
+        list.push({
+          name: name,
+          value: value
+        });
+      }
+      return list;
+    } catch (e) {
+      return [];
+    }
+  }
+
+  clearCookieList() {
+    if (!document.cookie || !navigator.cookieEnabled) {
+      return;
+    }
+
+    let list = this.getCookieList();
+    for (var i=0; i<list.length; i++) {
+      document.cookie = list[i].name + '=;expires=Thu, 01 Jan 1970 00:00:00 GMT';
+    }
+    this.renderStorage();
+  }
+
+  clearLocalStorageList() {
+    if (!!window.localStorage) {
+      try {
+        localStorage.clear();
+        this.renderStorage();
+      } catch (e) {
+        alert('localStorage.clear() fail.');
+      }
+    }
+  }
+
+} // END Class
+
+export default VConsoleStorageTab;

src/storage/style.less

@@ -0,0 +1,25 @@
+.vc-sub-tabbar {
+  background-color: #fbf9fe;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  .vc-subtab {
+    flex: 1;
+    line-height: 30px;
+    padding: 0 15px;
+    border-right: 1px solid #D9D9D9;
+    border-bottom: 1px solid #D9D9D9;
+    text-decoration: none;
+    text-align: center;
+    color: #000;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+  }
+  .vc-subtab:active {
+    background-color: rgba(0,0,0,0.15);
+  }
+  .vc-subtab.vc-actived {
+    background-color: #FFF;
+  }
+}

src/storage/tabbox.html

@@ -0,0 +1,7 @@
+<div class="vc-table">
+  <div class="vc-sub-tabbar">
+    <a href="javascript:;" class="vc-subtab vc-actived" data-type="cookies">Cookies</a>
+    <a href="javascript:;" class="vc-subtab" data-type="localstorage">LocalStorage</a>
+  </div>
+  <div class="vc-log"></div>
+</div>

webpack.config.js

@@ -42,11 +42,11 @@ module.exports = {
         'http://opensource.org/licenses/MIT',
         'Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.'
     ].join('\n'))
-    ,new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      }
-    })
+    // ,new webpack.optimize.UglifyJsPlugin({
+    //   compress: {
+    //     warnings: false
+    //   }
+    // })
     // ,new ExtractTextPlugin('[name].min.css') // 将css独立打包
   ]
 };