chrome浏览器本地信息的获取与设置

简介

本文主要针对前段开发，对于生产环境的开发经常会遇到拷被chrome本地LocalStroage里边的信息，手动的C和V显的太过繁琐。这里我主要使用chrome的插件（暴力猴）进行书写脚本解决这一问题。

暴力猴插件的下载可以先下载chrome浏览器访问助手，然后进入chrome应用商店进行下载！
下载完的暴力猴插件要同chrome访问助手一样放在chrome的扩展程序中。

脚本代码

// ==UserScript==
// @name        New script - caiicloud.com
// @namespace   xx
// @match       *
// @include     *
// @grant       GM_setValue
// @grant       GM_getValue
// @grant       GM_listValues  
// @grant       GM_deleteValue
// @version     1.0
// @author      qie
// @description 2020/11/20 上午10:24:22
// @require https://cdn.jsdelivr.net/npm/vue
// @require https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js
// ==/UserScript==


window.onload = () => {
  (() => {
    function setCookie(name, value) {
      const Days = 1;
      const exp = new Date();
      exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
      document.cookie =
        name + '=' + escape(value) + ';expires=' + exp.toGMTString();
    }

    function getCookie(name) {
      const reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)');
      const arr = document.cookie.match(reg);

      if (arr) {
        return unescape(arr[2]);
      } else {
        return null;
      }
    }
    const myapp = `
      <div id="myapp">
        <div v-if="isShow" style="width: 500px;height: 400px;overflow: hidden;overflow-y: scroll;position: fixed;top: 25%;left: calc(100%/2 - 250px);background: #fff;border-radius: 5px">
          <div style="font-size: 18px;padding: 15px 0;padding-left: 15px;border-bottom: 1px solid #ddd;display: flex;justify-content: space-between" class="title">
            <span>温馨提示</span>
            <span @click="isShow = false" style="cursor: pointer;padding-right: 10px">X</span>
          </div>
          <div style="padding: 20px" class="content">
            <p>成功获取以下信息</p >
            ${
              GM_listValues().map(item => `
                <p><span>${item}</span>: <span>${GM_getValue(item)}</span><p>
              `)
            }
          </div>
        </div>
        <div v-if="show" style="width: 300px;position: fixed;top: 25%;left: calc(100%/2 - 150px);background: #fff;border-radius: 5px">
          <div style="font-size: 18px;padding: 15px 0;padding-left: 15px;border-bottom: 1px solid #ddd" class="title">温馨提示</div>
          <div style="padding: 20px" class="content">
            <p>设置成功</p >
          </div>
        </div>
      </div>
    `;
    $('body').append(myapp);
    new Vue({
      el: '#myapp',
      data: {
        isShow: false,
        show: false
      },
      mounted() {
        const oBtnGet = document.createElement('button');
        oBtnGet.style = 'width: 30px;position: fixed;top: 30px;left: 2px;z-index: 9999';
        const oBtnGetText = document.createTextNode("获取信息");
        oBtnGet.appendChild(oBtnGetText);
        document.body.appendChild(oBtnGet);
        oBtnGet.onclick = () => {
          // 获取前先移除掉存储数据
          if (GM_listValues().length) {
              for (let value of GM_listValues().values()) {
                GM_deleteValue(value);
              }
          }
          
          let localStorageArr = [];
          let cookieArr = [];
          // localstorage         
          for (let i = 0; i < localStorage.length; i++) {
            let key = localStorage.key(i); //获取本地存储的Key
            GM_setValue(key, JSON.stringify(localStorage.getItem(key)));
            localStorageArr.push(key);
          }
          GM_setValue('localStorageArr', localStorageArr);
          
          // cookie
          let arrCookie = document.cookie.split(';');
          for (let i = 0; i < arrCookie.length; i++) {
            let key = arrCookie[i].split('=')[0]; //获取本地存储的Key
            let value = arrCookie[i].split('=')[1];
            GM_setValue(key, JSON.stringify(value));
            cookieArr.push(key);
          }
          GM_setValue('cookieArr', cookieArr);
          
          this.isShow = true;
          // setTimeout(() => {
          //   this.isShow = false;
          // }, 2000);
        }

        const oBtnSet = document.createElement('button');
        oBtnSet.style = 'width: 30px;position: fixed;top: 130px;left: 2px;z-index: 9999;';
        const oBtnSetText = document.createTextNode("设置信息");
        oBtnSet.appendChild(oBtnSetText);
        document.body.appendChild(oBtnSet);
        oBtnSet.onclick = () => {
          // localstorage
          let localStorageArr = GM_getValue('localStorageArr');
          for (let key of localStorageArr.values()) {
            localStorage.setItem(key, JSON.parse(GM_getValue(key)));
          }
          
          // cookie
          let cookieArr = GM_getValue('cookieArr');
          for (let key of cookieArr.values()) {
            setCookie(key, JSON.parse(GM_getValue(key)));
          }
          console.log(GM_listValues());
          this.show = true;
          setTimeout(() => {
            this.isShow = this.show = false;
            window.location.reload();
          }, 2000)
        } 
      },
      methods: {
            
      }
    })
  })()
}

注：这段代码直接考本在安装好的暴力猴插件中的新建文本中，然后点击保存并把暴力猴开启，接着找一个网页进行刷新一下就会出来“设置信息”与“获取信息”。

“获取信息”：在要获取的网页点击，目的是获取当前浏览器中localStorage里的信息
“设置信息”：在开发的网页点击，目的是为了吧获取的localstorage放在开发网页的localstorage中。