cookie,localStorage,sessionStorage的区别

cookie,localStorage,sessionStorage的区别

以上是目前的三种浏览器的本地数据存储方式，他们都有一个共同的特点，就是安全性低，所有的信息都会在浏览器中显示出来，所以用户相关的敏感信息千万不要保存在其中。以防止XSS注入。

cookie，cookie可存储的数据量很小，大概就40Kb左右，常用来做“记住密码”功能，在localStorage出来之前也用来做电商网站的购物车功能。cookie使用起来比较麻烦，需要程序员自己封装方法。

		var oUserName = document.querySelector(".username");
        var oPassWord = document.querySelector(".password");
        var oForm = document.querySelector("form");
        var oGet = document.querySelector(".get");
        var oRemove = document.querySelector(".remove");

        //设置cookie
        oForm.onsubmit = function () {
            setCookie(oPassWord.name, oPassWord.value, 7);
            return false;
        }
        // 删除cookie
        oRemove.onclick = function () {
            removeCookie(oPassWord.name);
        }

        //设置cookie
        function setCookie(name, value, time) {
            var newDate = new Date();
            newDate.setDate(newDate.getDate() + time);
            document.cookie = `${name}=${value};expires=${time==null?"":newDate}`;
        }
        //获取cookie
        function getCookie(name) {
            var allCookie = document.cookie;
            var nameIndex = allCookie.search(`${name}=`);
            var valueIndex = 0;
            // 判断当前cookie是否为最后一个，最后一个无“;”
            allCookie.indexOf(";", nameIndex) > 0 ? valueIndex = allCookie.indexOf(";", nameIndex) : valueIndex = allCookie.length;
            return allCookie.slice(nameIndex + (`${name}=`.length), valueIndex);
        }
        // 删除cookia
        function removeCookie(name) {
            setCookie(name, "123", -1);
        }

localStorage，这是html5中提出的一个概念，他的出现一定程度上替代了一部分cookie的功能，如上面提到的购物车。localStorage相比较cookie容量要大很多（5M），常用来做需要长期保存的数据，因为他默认不支持设置过期时间。localStorage有自己的接口，也自行二次封装。
localStorage.setItem()/localStorage.getItem()/localStorage.removeItem()

sessionStorage的容量与localStorage差不多，了解过后端语言的可能知道session，经常拿来做用户的身份验证，当用户退出后session清除。这也一定程度上揭露了session的概念，英语中session是会话的意思，而在前端一个会话就是一个页面开始到结束，也就是页面的卸载，当页面发生跳转，退出等都表示一个页面被卸载，此时sessionStorage中的数据就会被删除。所以sessionStorage用来保存临时数据。他的接口使用方法与localStorage基本一致
sessionStorage.setItem()/sessionStorage.getItem()/sessionStorage.removeItem()