目錄

前端小試身手(1)--幫「發問/發文頁」新增"編輯"鈕～

前端小試身手(2)--it幫跳轉到最佳解答

前端小試身手(3)--增添系列文目錄

前端小試身手(4)--it幫發文「一眼全覽」

前端小試身手(5)-備份it幫的發問！

前端小試身手(6)--IMG複製大師，懶人專用小腳本

前端小試身手(7)--迷片靜音神隊友，讓你尷尬不再有！

前端小試身手(8)--教你寫出「思想審查警衛」，過濾垃圾雜訊的利器！

前端小試身手(9)--文章縮圖預覽(以codeLove論壇為例)

前題：

寫了不少功能在這個「前端小試身手」的系列，包含修改發文標題、一頁全覽發文、一次看鐵人賽系列文等等。
今天要實現更有用更酷的功能，就是備份發問！
it幫發問不像是發文，可以有儲存草稿的按鈕來存檔，
很多時候用心發問，就會蒐集很多資料，不小心點到其他頁面，全部心血就會泡湯。哭！

這時候備份功能就是超級需要的！

效果圖：

使用說明

預設是5000毫秒備份一次，只要有開啟備份，當文章內容消失後，點選「複製至剪貼簿」
就會把存起來的文章丟到剪貼簿，只要到文章編輯區貼上即可唷～～～～
原理是localstorge，其實也有把標題儲存起來呢！

備份的相關資訊會通知於console，可以打開來觀察。

油猴原始碼

// ==UserScript==
// @name         Backup for ithelp asking question
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  備份it幫發問
// @author       You
// @match        https://ithelp.ithome.com.tw/questions/create
// @icon         
// @grant        none
// ==/UserScript==

(function() {
    document.querySelector("#subject").style.width="80%";
   main=document.createElement('div')
main.classList="main"
main.innerHTML=`   <div class="container">
            <input type="checkbox" class="input">
        </div>
        <span>開啟自動備份</span>
        <input type="text" placeholder="輸入備份毫秒數" class="seconds">
        <div class="mybtn">備份至剪貼版</div>`
document.querySelector("body > div.container.index-top > div > div > div > div > div > form > div:nth-child(2)").appendChild(main)
st=document.createElement('style')
st.innerHTML=`    .input{
        -webkit-appearance: none;
        position: relative;
        width: 30px;
        height: 15px;
        border-radius: 25px;
        background-color: #ccc;
        outline: none;
        cursor: pointer;

    }

    .input::after{
        content: '';
        position: absolute;
        top: 50%;
        left: 30%;
        transform: translate(-50%,-50%);
        border-radius: 50%;
        height: 10px;
        width: 10px;
        background-color: rgba(255,255,255);
        transition: left 3.s;
    }

    .input:checked{
        background-color: rgba(141,221,141);
    }

    .input:checked::after{
        left: 70%;
    }

    .main{
        display: flex;
        flex-direction: column;
        width: 100px;
        border: 2px  black;
        border-style: double;
        border-radius: 10px;
        box-shadow: 3px 2px 5px black;
        padding: 5px;
        -webkit-transform: scale(1);
        box-sizing: content-box;
        clear: both;
        float: right;
        position: absolute;
        right: 0;
        top: 70px;
    }

    .container{
        display: flex;
        justify-content: center;
        width:100%;
    }

    .mybtn{
        margin-top: 5px;
        font-size: 13px;
        border: 1px solid;
        background: #e6e5e5;
        text-align: center;
        cursor:pointer;
    }

    .mybtn:hover{
        background: #dbdada;
    }


    .seconds{
        font-size: 12px;
        text-align: center;
    }

    .span{
        text-align: center;
    }
    `
document.head.append(st)



    let ms=5000
    input=document.querySelector('.input')
    seconds=document.querySelector('.seconds')
    seconds.value=5000
    //copy API

let mybtn=document.querySelector('.mybtn')
  mybtn.addEventListener('click',()=>{
      let memory = localStorage.getItem('content')
      if (memory){
          T.innerHTML=localStorage.getItem('content');
      }else{
          T.innerHTML=document.querySelector('.CodeMirror-code').innerText;
      }
    var copyText = document.getElementById("myInput");
    copyText.select();
    copyText.setSelectionRange(0, 99999);
    navigator.clipboard.writeText(copyText.value);
  })
    //-----------------------------------
    //create textarea
    T=document.createElement('textarea')
    document.body.appendChild(T)
    T.id="myInput"
    T.style.display="none"
    //-------------------------
    //make a class
    class NewArticle {
        constructor(title, content) {
        this.title = title;
        this.content = content;
        }
        setlocal(){
            localStorage.setItem('title', this.title);
            localStorage.setItem('content', this.content);
        }
    }
let  StartBackup
    input.addEventListener('click',()=>{
        if (input.checked){
            ms=seconds.value
            console.warn('備份中...')
            console.warn('目前備份速度是'+ms+'毫秒')

            seconds.disabled=true
            seconds.placeholder="//執行備份中//"
            seconds.style.backgroundColor="black"

            //run the code
            function Setdata(){
            title = document.querySelector('.form-control').value;
            content = document.querySelector('.CodeMirror-code').innerText;
            let article = new NewArticle (title,content);
            article.setlocal();console.log('又完成了一次備份(́◉◞౪◟◉‵)')
            T.innerHTML=document.querySelector('.CodeMirror-code').innerText;
            }

            Setdata()
            StartBackup = setInterval(Setdata,ms)
        }else{
            seconds.placeholder="輸入備份毫秒數"
            seconds.style.backgroundColor=""
            seconds.disabled=false
            clearInterval(StartBackup)
        }
    })


})();

後記

剛剛打這篇文章，整篇因為錯誤代碼沒有送出...導致又要重打==
雖然有儲存草稿功能，但不能自動備份的話等於沒有屁用（怒
這邊也是提醒各位，如果有這樣子的需求或擔憂，可以自行延伸，把同樣邏輯套在發文即可！

完全不難，我到時候有空也來自己搞一下，不然重打真的...QQQ嗚嗚嗚！

前端小試身手，我們下次見。