Question

Cookie、local Storage、session Storage傻傻分不清楚

Answer 1

    Cookie，有时也用其复数形式 Cookies。类型为“ 小型文本文件 ”，是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息 （可以设置保质期哦）。

    Web Storage实际上由两部分组成：sessionStorage与localStorage 。 sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁（说人话就是浏览器一关就没了）。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。 localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的（说人话就是要是不删除，浏览器关了还有，气不气）。

1.存储时间

        cookie：可设置有效期。如果不设置有效期，关闭浏览器就会被清除（会话级别）    

        sessionStorage：存储会话级的数据，关闭浏览器就会被清除

        localStorage：持久化存储，除非手动删除，否则一直存在

2.存储体积

        cookie：一般不超过4kb

        web storage：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比Cookie要大很多。

3.操作难易

        cookie：相对麻烦

        web storage：相对简单

4.其他

        cookie数据始终在同源的http请求中携带(即使不需要)，即cookie在浏览器和服务器间来回传递

        cookie数据还有路径（path）的概念，可以限制。cookie只属于某个路径下

1.cookie

        创建 cookie 如下所示：

        document.cookie="username=XXX";

        您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：

        document.cookie="username=XXX; expires=Thu, 18 Dec 2043 12:00:00 GMT";

        您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。

        document.cookie="username=XXX; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

        读取 cookie：

        var x = document.cookie;（数据格式 cookie1=value; cookie2=value; cookie3=value;）

         修改cookie

        document.cookie="username=XXX; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

        删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:

        document.cookie = "username=XXX; expires=Thu, 01 Jan 1970 00:00:00 GMT";

        自定义封装函数

        function setCookie(key, value, day, path) {

            //为了防止用户传入一些影响后期获取cookie截取的字符 对用户传入的值进行转码

            value = encodeURIComponent(value);

            //现在的时间对象

            var date = new Date();

            //获取现在的时间戳

            var time = date.getTime();

             //加上有效期 得到未来的时间戳

            time += 1000 * 60 * 60 * 24 * day;

            //得到未来的时间对象

            date.setTime(time);

            //转换成符合要求的有效期格式

            var expires = date.toGMTString();

            document.cookie = key + "=" + value + ";expires=" + expires + (path ? ";path=" + path : "");

        }

        function getCookie(key) {

            var str = document.cookie;

            var arr = str.split(";");

            var obj = {};

            for (var i = 0; i < arr.length; i++) {

                if (arr[i].split("=")[0].trim() == key) {

                    //存入的时候转码了  需要的时候转码回来

                    console.log(decodeURIComponent(arr[i].split("=")[1].trim()));

                    return;

                } else {

                    continue;

                }

            }

        }

        原生js操作起来一般比较麻烦，一般可选用cookie插件提高效率

2.web storage

        保存更改数据语法：

        localStorage.setItem("key", "value");

        读取数据语法：

        var lastname = localStorage.getItem("key");

        删除数据语法：

        localStorage.removeItem("key");

        sessionStorage 亦是如此

小白日记

如有不合适，敬请指正，谢谢