storage.js 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254
  1. /*
  2. Tencent is pleased to support the open source community by making vConsole available.
  3. Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
  4. 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
  5. http://opensource.org/licenses/MIT
  6. 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.
  7. */
  8. /**
  9. * vConsole Storage Plugin
  10. */
  11. import VConsolePlugin from '../lib/plugin.js';
  12. import tplTabbox from './tabbox.html';
  13. import tplList from './list.html';
  14. import * as tool from '../lib/tool.js';
  15. import $ from '../lib/query.js';
  16. class VConsoleStorageTab extends VConsolePlugin {
  17. constructor(...args) {
  18. super(...args);
  19. this.$tabbox = $.render(tplTabbox, {});
  20. this.currentType = ''; // cookies, localstorage, ...
  21. this.typeNameMap = {
  22. 'cookies': 'Cookies',
  23. 'localstorage': 'LocalStorage',
  24. 'sessionstorage': 'SessionStorage'
  25. }
  26. }
  27. onRenderTab(callback) {
  28. callback(this.$tabbox);
  29. }
  30. onAddTopBar(callback) {
  31. let that = this;
  32. let types = ['Cookies', 'LocalStorage', 'SessionStorage'];
  33. let btnList = [];
  34. for (let i = 0; i < types.length; i++) {
  35. btnList.push({
  36. name: types[i],
  37. data: {
  38. type: types[i].toLowerCase()
  39. },
  40. className: '',
  41. onClick: function() {
  42. if (!$.hasClass(this, 'vc-actived')) {
  43. that.currentType = this.dataset.type;
  44. that.renderStorage();
  45. } else {
  46. return false;
  47. }
  48. }
  49. });
  50. }
  51. btnList[0].className = 'vc-actived';
  52. callback(btnList);
  53. }
  54. onAddTool(callback) {
  55. let that = this;
  56. let toolList = [{
  57. name: 'Refresh',
  58. global: false,
  59. onClick: function(e) {
  60. that.renderStorage();
  61. }
  62. }, {
  63. name: 'Clear',
  64. global: false,
  65. onClick: function(e) {
  66. that.clearLog();
  67. }
  68. }];
  69. callback(toolList);
  70. }
  71. onReady() {
  72. // do nothing
  73. }
  74. onShow() {
  75. // show default panel
  76. if (this.currentType == '') {
  77. this.currentType = 'cookies';
  78. this.renderStorage();
  79. }
  80. }
  81. clearLog() {
  82. if (this.currentType && window.confirm) {
  83. let result = window.confirm('Remove all ' + this.typeNameMap[this.currentType] + '?');
  84. if (!result) {
  85. return false;
  86. }
  87. }
  88. switch (this.currentType) {
  89. case 'cookies':
  90. this.clearCookieList();
  91. break;
  92. case 'localstorage':
  93. this.clearLocalStorageList();
  94. break;
  95. case 'sessionstorage':
  96. this.clearSessionStorageList();
  97. break;
  98. default:
  99. return false;
  100. }
  101. this.renderStorage();
  102. }
  103. renderStorage() {
  104. let list = [];
  105. switch (this.currentType) {
  106. case 'cookies':
  107. list = this.getCookieList();
  108. break;
  109. case 'localstorage':
  110. list = this.getLocalStorageList();
  111. break;
  112. case 'sessionstorage':
  113. list = this.getSessionStorageList();
  114. break;
  115. default:
  116. return false;
  117. }
  118. let $log = $.one('.vc-log', this.$tabbox);
  119. if (list.length == 0) {
  120. $log.innerHTML = '';
  121. } else {
  122. // html encode for rendering
  123. for (let i=0; i<list.length; i++) {
  124. list[i].name = tool.htmlEncode(list[i].name);
  125. list[i].value = tool.htmlEncode(list[i].value);
  126. }
  127. $log.innerHTML = $.render(tplList, {list: list}, true);
  128. }
  129. }
  130. getCookieList() {
  131. if (!document.cookie || !navigator.cookieEnabled) {
  132. return [];
  133. }
  134. let list = [];
  135. let items = document.cookie.split(';');
  136. for (let i=0; i<items.length; i++) {
  137. let item = items[i].split('=');
  138. let name = item.shift().replace(/^ /, ''),
  139. value = item.join('=');
  140. try {
  141. name = decodeURIComponent(name);
  142. value = decodeURIComponent(value);
  143. } catch(e) {
  144. console.log(e, name, value);
  145. }
  146. list.push({
  147. name: name,
  148. value: value
  149. });
  150. }
  151. return list;
  152. }
  153. getLocalStorageList() {
  154. if (!window.localStorage) {
  155. return [];
  156. }
  157. try {
  158. let list = []
  159. for (var i = 0; i < localStorage.length; i++) {
  160. let name = localStorage.key(i),
  161. value = localStorage.getItem(name);
  162. list.push({
  163. name: name,
  164. value: value
  165. });
  166. }
  167. return list;
  168. } catch (e) {
  169. return [];
  170. }
  171. }
  172. getSessionStorageList() {
  173. if (!window.sessionStorage) {
  174. return [];
  175. }
  176. try {
  177. let list = []
  178. for (var i = 0; i < sessionStorage.length; i++) {
  179. let name = sessionStorage.key(i),
  180. value = sessionStorage.getItem(name);
  181. list.push({
  182. name: name,
  183. value: value
  184. });
  185. }
  186. return list;
  187. } catch (e) {
  188. return [];
  189. }
  190. }
  191. clearCookieList() {
  192. if (!document.cookie || !navigator.cookieEnabled) {
  193. return;
  194. }
  195. let hostname = window.location.hostname;
  196. let list = this.getCookieList();
  197. for (var i=0; i<list.length; i++) {
  198. let name = list[i].name;
  199. document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT`;
  200. document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/`;
  201. document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/;domain=.${hostname.split('.').slice(-2).join('.')}`;
  202. }
  203. this.renderStorage();
  204. }
  205. clearLocalStorageList() {
  206. if (!!window.localStorage) {
  207. try {
  208. localStorage.clear();
  209. this.renderStorage();
  210. } catch (e) {
  211. alert('localStorage.clear() fail.');
  212. }
  213. }
  214. }
  215. clearSessionStorageList() {
  216. if (!!window.sessionStorage) {
  217. try {
  218. sessionStorage.clear();
  219. this.renderStorage();
  220. } catch (e) {
  221. alert('sessionStorage.clear() fail.');
  222. }
  223. }
  224. }
  225. } // END Class
  226. export default VConsoleStorageTab;