html5本地存儲數據，實現自動登錄功能

背景：

　　在項目中遇到一個需求：用戶登錄完之后，網站自動保存用戶id存儲在本地，在下次打開網頁時，通過id判斷是否要進行登錄操作。

技術方案：

　　在HTML5中，本地存儲是一個window的屬性，包括localStorage和sessionStorage，從名字應該可以很清楚的辨認二者的區別，前者是一直存在本地的，后者只是伴隨着session，窗口一旦關閉就沒了。二者用法完全相同，這里以localStorage為例。

　　用戶名、密碼保存，自動登錄等，可以通過設置cookie實現，第一次登錄網站后在本地計算機的中寫入cookie，之后再次登錄此網站查看cookie中現有的值，用cookie值進行網站登錄即可。但是 cookie 不適合大量數據的存儲，因為它們由每個對服務器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。

　　HTML5提供了localstorage接口，就是。它使在不影響網站性能的情況下存儲大量數據成為可能。對於不同的網站，數據存儲於不同的區域，並且一個網站只能訪問其自身的數據。

代碼實現：

　　html

　　 <button class="setBtn">寫入localStorage</button>
    <button class="deleteBtn">刪除localStorage</button>

    <span class="span1">未登錄</span>
    <span class="span2" style="display: none">已經登錄了, 歡迎回來</span>

　　js

    $(function () {
        var storage = window.localStorage;
        
        // 獲取localStorage數據
        var local_name = storage["local-name"];
        if(local_name){ // 已登錄
            $('.span1').css({'display': 'none'});
            $('.span2').css({'display': 'block'})
        }else{ // 未登錄
            $('.span1').css({'display': 'block'});
            $('.span2').css({'display': 'none'})
        }

        // 寫入數據
        $('.setBtn').on('click', function () {
            storage['local-name'] = 'ccc';
            console.log('localStorage設置完畢');
        });

        // 刪除數據
        $('.deleteBtn').on('click', function () {
            localStorage.removeItem('local-name');
            console.log('localStorage刪除完畢');
        });
    });