我們接續上一篇完成一些未完成的功能。

完成按鈕 & 返回按鈕

這兩個按鈕在整個篇章中，屬於比較困難的部分。
我們先來分析一下，應該要完成哪些步驟才能走完流程。

完成按鈕:

1. 修改訂單的狀態為true(完成)
2. 將完成清單中新增一筆與這筆資料相等的訂單
3. 刪除未完成訂單中的這筆資料
4. 與資料庫資料同步

返回按鈕:

1. 修改訂單的狀態為false(未完成)
2. 將未完成清單中新增一筆與這筆資料相等的訂單
3. 刪除完成清單中的這筆資料
4. 與資料庫資料同步

我們每次做狀態更新的時候都需要修改畫面，
並且更新資料。若老闆不斷修改狀態的話，就會不斷的與後台往來資料。
導致速度緩慢，也會造成系統的負擔。
所以這邊比較好的做法是，我們先將資料存在localStorage，
然後在達成特定條件的時候再與後台做資料的交換。

完成按鈕

1. 打開 Proprietor.cshtml
2. 分別將setUndoOrder() 與 **setDoneOrder()**取得的資訊記錄到localStorage

//先將資料轉成字串再存入
localStorage.setItem("undo_data", JSON.stringify(data))
localStorage.setItem("done_data", JSON.stringify(data))

setUndoOrder():

function setUndoOrder() {
        var json = 0
        $.ajax({
        url: "@Url.Action("GetUndoOrder")",
            type: "post",
            dataType: "json",
            success: function (data) {
                localStorage.setItem("undo_data", JSON.stringify(data))
                data.forEach((item) => {
                    undo_order(item.head, item.bodys)

                })
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert("status: " + xhr.status);
            alert(xhr.responseText);
            alert(thrownError);
        },
        complete: function () {

        }

        })
        return json
    }

setDoneOrder():

function setDoneOrder() {
        var json = 0
        $.ajax({
        url: "@Url.Action("GetDoneOrder")",
            type: "post",
            dataType: "json",
            success: function (data) {
                localStorage.setItem("done_data",JSON.stringify(data))
                data.forEach((item) => {
                    

                })
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert("status: " + xhr.status);
            alert(xhr.responseText);
            alert(thrownError);
        },
        complete: function () {

        }

        })
        return json
    }

3. 修改undo_order()，給予button name，讓我們比較好搜尋

<button id="${uid}_btn" name="done_btn" type="button" class="btn btn-success">
    完成
</button>

undo_order():

function undo_order(head, bodys) {
        var formNum = head.formnum
        var count = bodys.length
        var uid = head.uid
        var html_text = `
<li id="${uid}_li" class="list-group-item  justify-content-between align-items-center list-group-item-success">
    <table id="${uid}_table" class="table table-borderless list-group-item-success">
        <thead>
            <tr>
                <th>
                    訂單編號 ${formNum}
                    <span class="badge bg-primary rounded-pill">${count}</span>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="list-group item_list">

                    </div>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>
                    <button id="${uid}_btn" name="done_btn" type="button" class="btn btn-success">
                        完成
                    </button>
                </td>
            </tr>
        </tfoot>
    </table>
</li>
`
        $('#undo_list').append(html_text)

        bodys.forEach((item) => {
            var item_html = undo_order_item(item.item, item.count)
            var selector = `#${uid}_table>tbody>tr>td>div`

            $(selector).append(item_html)
        }
        )

    }

4. 將name = done_btn 的button新增事件

$('#undo_list').on("click", 'button[name="done_btn"]', function () {
        var uid = $(this).attr("id").replace("_btn", "")
        console.log(uid)
        var undo_data = JSON.parse(localStorage.getItem("undo_data"))
        var done_data = JSON.parse(localStorage.getItem("done_data"))
        undo_data.forEach((item,index) => {
            if (item.head.uid == uid) {
                //新增元素到done_list
                done_order(item.head, item.bodys)
                //新增資料到done_data
                done_data[done_data.length] = item
                //刪除undo_list的元素
                $(`#${uid}_li`).remove()
                //刪除undo_data的資料
                undo_data.splice(index, 1)
                //將資料存回localStotage
                localStorage.setItem("done_data",JSON.stringify(done_data))
                localStorage.setItem("undo_data",JSON.stringify(undo_data))
            }
        })
        
    });

返回按鈕

將剛剛的做法如法炮製

1. 打開 Proprietor.cshtml
2. 修改 done_order()，給予button name，讓我們比較好搜尋

<button type="button" class="btn btn-outline-warning" id="btn${uid}" name="itemback_btn">
    返回
</button>

done_order()

function done_order(head,bodys) {
        var formNum = head.formnum
        var uid = head.uid
        var html_text = `
<div ${uid}_div>
    <button class="list-group-item list-group-item-action active btn-outline-success" type="button" data-toggle="collapse" data-target="#collapse${uid}" aria-expanded="false" aria-controls="collapse${uid}">
        訂單編號 ${formNum}
    </button>
    <div class="collapse" id="collapse${uid}">
        <div class="card card-body">
            <div class="list-group" name="item_list">

            </div>
            <div>
                <br />
                <button type="button" class="btn btn-outline-warning" id="btn${uid}" name="itemback_btn">
                    返回
                </button>
            </div>
        </div>
    </div>
</div>
`
        $('#done_list').append(html_text)

        bodys.forEach((item) => {
            var item_html = done_order_item(item.item, item.count)
            var selector = `#collapse${uid}>div>div[name='item_list']`
            $(selector).append(item_html)
        }
        )

    }

3. 新增 button[name="itemback_btn"] 的事件

$('#done_list').on("click", 'button[name="itemback_btn"]', function () {
        var uid = $(this).attr("id").replace("btn", "")
        var undo_data = JSON.parse(localStorage.getItem("undo_data"))
        var done_data = JSON.parse(localStorage.getItem("done_data"))
        done_data.forEach((item, index) => {
            if (item.head.uid == uid) {
                undo_order(item.head, item.bodys)
                undo_data[undo_data.length] = item
                $(`#${uid}_div`).remove()
                done_data.splice(index, 1)
                localStorage.setItem("done_data", JSON.stringify(done_data))
                localStorage.setItem("undo_data", JSON.stringify(undo_data))
            }
        })

    });

4. 成果
   

結語

localStorage的時效是永久的，
所以在使用localStorage需要注意避免一昧的新增。