localStorage、sessionStorage、cookie

方法名	生命週期	存儲大小
cookie	未設置日期，瀏覽器關閉之前生效	4kB
sessionStorage	瀏覽器關閉之前生效	5M
localStorage	永久生效	5M

相同點：都是保存在瀏覽器端，且是同源的

1、localStorage

– 生命週期較長，保存的數據始終有效
– 該對象屬於window對象
– 存儲的數據可以在所有同源窗口之間共享
– 存儲數據量較大，可以存儲5M
– 不會自動將數據發送給服務器，僅在本地保存

localStorage實現：
姓名：<input type="text" name="names" /><br />
密碼：<input type="password" name="pwd" /><br />
記住用戶信息：<input type="checkbox" name="check" id="check" />
<!--具體實現-->
<script>
    /*
     * 1、獲取所有表單信息
     * 2、判斷複選框的選中狀態
     * 3、獲取輸入的用戶名和密碼，將複選框的值設置爲true
     * 4、在將name表單的屬性name設置爲name時，出現錯誤，在以後的實現過程中，注意name值的設置
     * */
    var names = document.getElementsByName("names")[0];
    var pwd = document.getElementsByName("pwd")[0];
    var check = document.getElementsByName("check")[0];
    if(localStorage.getItem("names") && localStorage.getItem("pwd")){
        names.value=localStorage.getItem("names");
        pwd.value=localStorage.getItem("pwd");
        alert(pwd.value);
        check.checked = true;
}                                                                          
    check.onclick = function(){
        if(check.checked){
            localStorage.setItem("names", names.value);           
            localStorage.setItem("pwd",pwd.value);
        }else{
            localStorage.removeItem("names");
            localStorage.removeItem("pwd");
        }
    }
</script>

2、sessionStorage

– 生命週期較短，在瀏覽器關閉之前有效
– 該對象屬於window對象
– 存儲的數據在不同的瀏覽器窗口中不能共享
– 不會自動將數據發送給服務器，僅在本地存儲

sessionStorage實現：
標題：<input type="text" name="title" />
內容：<textarea name="content"></textarea>
<input type="button" value="提交" name="submits"/>
<script>
    var title = document.getElementsByName("title")[0];
    var content = document.getElementsByName("content")[0];
    var submits = document.getElementsByName("submits")[0];

    if(sessionStorage.title || sessionStorage.content){
        title.value = sessionStorage.title;
        content.value = sessionStorage.content;
    }
    submits.onclick = function(){
        sessionStorage.title = title.value;
        sessionStorage.content = content.value;
    }
</script>

3、cookie

– 如果沒有設置expires，則在瀏覽器窗口關閉之後失效；
   如果設置了expires，那麼在設置的有效期之前，數據將會一直有效；
– 在瀏覽器和服務器之間來回傳遞數據
– 存儲的數據量小，最多隻能存儲4kb