html5本地存储数据，实现自动登录功能

tsuidev 2017-12-06 原文

背景：

　　在项目中遇到一个需求：用户登录完之后，网站自动保存用户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>

    $(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删除完毕');
        });
    });