iT邦幫忙

0

請問sessionStorage怎麼利用變數做區隔?

  • 分享至 

  • xImage

各位好,我想我下的這個題目很模糊,應該不知道我想要表達什麼吧!
我用例子來說明我的問題
以下是一個可以運行的code

     <script type="text/javascript">
        $(function () {
            $("#date_1").datepicker({
                dateFormat: 'yy/mm/dd'
            });
            $("#date_2").datepicker({
                dateFormat: 'yy/mm/dd'
            });
	    $("#date_3").datepicker({
                dateFormat: 'yy/mm/dd'
            });
        });
    </script>
    <script type="text/javascript">
        window.onunload = function saveSession() {
            var date1 = document.getElementById("date_1");
            var date2 = document.getElementById("date_2");
            var date3 = document.getElementById("date_3");
            var mydata1 = date1.value;
            var mydata2 = date2.value;
            var mydata3 = date3.value;
            var oStorage1 = window.sessionStorage;
            var oStorage2 = window.sessionStorage;
            var oStorage3 = window.sessionStorage;
            oStorage1.mydata = mydata1;
            oStorage2.mydata = mydata2;
            oStorage3.mydata = mydata3;
        }
        function readSession() {
            var date1 = document.getElementById("date_1");
            var date2 = document.getElementById("date_2");
            var date3 = document.getElementById("date_3");
            var oStorage1 = window.sessionStorage;
            var oStorage2 = window.sessionStorage;
            var oStorage3 = window.sessionStorage;
            var mydata1 = "請選擇日期";
            var mydata2 = "請選擇日期";
            var mydata3 = "請選擇日期";
            if (oStorage1.mydata) {
                mydata1 = oStorage1.mydata;
            }
            if (oStorage2.mydata) {
                mydata2 = oStorage2.mydata;
            }
            if (oStorage3.mydata) {
                mydata3 = oStorage3.mydata;
            }
            date1.value = mydata1;
            date2.value = mydata2;
            date3.value = mydata3;
        }
    </script>

<input name="AA" type="text" id="date_1" />
<input name="BB" type="text" id="date_2" />
<input name="CC" type="text" id="date_3" />
但這段程式的缺點是一定要3個input都填了才能做保留的動作,不然只要按F5就全部都消失
我想要問能否可以只填一個其它不要動,值一樣做保留...

要麻煩大家了,感謝各位~

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

8
wiseguy
iT邦超人 1 級 ‧ 2013-02-16 09:29:06
最佳解答

把 15 行那個 window.onunload 的 function,改為 binding 到三個 input 的 onblur 或 onchange 上。這樣只要其中一個有改變,就會存一次。

a70706z iT邦新手 5 級 ‧ 2013-02-16 12:18:11 檢舉

感謝 wiseguy 大 回答
請問您的意思是指下列這樣嗎?
window.onblur = function saveSession() 或者
window.onchange = function saveSession()

a70706z iT邦新手 5 級 ‧ 2013-02-16 12:23:27 檢舉

如果 wiseguy 大 的意思是
window.onblur = function saveSession() 或者
window.onchange = function saveSession()

剛剛測試的結果...經過F5會不能保留當初輸入的值
再麻煩wiseguy 大 一下了~
非常感謝您~謝謝

wiseguy iT邦超人 1 級 ‧ 2013-02-16 14:00:02 檢舉

我說的是『改為 binding 到三個 input 的 onblur 或 onchange』,你還是 binding 在 window,當然無效。
15 行,把 window.onunload = 去掉。再把三個 input 改為:
<input name="AA" type="text" id="date_1" onblur="saveSession();"/>
<input name="BB" type="text" id="date_2" onblur="saveSession();"/>
<input name="CC" type="text" id="date_3" onblur="saveSession();"/>

我要發表回答

立即登入回答