cookie,sessionStorage,localStorage使用总结

时间 2019-11-12

标签 cookie sessionstorage localstorage 使用总结栏目 HTML 繁體版

原文原文链接

1、cookie,sessionStorage,localStorage的共同点和区别前端

共同点：web

都是保存在浏览器端，且同源的。数据库

不一样点：json

1.cookie: 存储在用户本地终端上的数据。有时也用cookies,指某些网站为了辨别用户身份，进行session跟踪而存储在本地终端上的数据，一般通过加密。通常应用最典型的就是判断注册用户是否已经登过该网站。cookie在浏览器和服务器间来回传递；cookie数据还有路径（path）的概念，能够限制cookie只属于某个路径下。存储大小限制也不一样，cookie数据不能超过4k,同时由于每次http请求都会携带cookie，因此cookie只适合保存很小的数据，如会话标识。api

2.sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，能够达到5M或更大。浏览器

3.数据有效期不一样，sessionStorage:打开浏览器开始关闭浏览器消失，天然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，永久存储除非手动删除，所以用做持久数据；cookie能够设置存储时间，只在cookie过时时间以前有效，即便窗口或浏览器关闭。缓存

4.做用域不一样：sessionStorage不在不一样的浏览器窗口中共享，即便是同一个页面；localStorage在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。WebStorage支持事件通知机制，能够将数据更新的通知发送给监听者。WebStorage的api接口使用更方便。安全

2、什么是localStorage、sessionStorage?服务器

所谓的WebStorage指的是客户端存储,在这里指的是浏览器端存储,好比在网站上自动登录这些功能,其实就是把一些少许的数据存储在浏览器等客户端中,这样能够减小不必的请求到服务器,下降服务器的压力,给用户提供更好的体验.cookie

WebStorage的目的是克服由cookie所带来的一些限制，当数据须要被严格控制在客户端时，不须要持续的将数据发回服务器。webstorage两个主要目标：（1）提供一种在cookie以外存储会话数据的路径。（2）提供一种存储大量能够跨会话存在的数据的机制。HTML5的WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）。

1.生命周期：localStorage的生命周期是永久的，关闭页面或浏览器以后localStorage中的数据也不会消失。除非手动删除数据，不然数据永远不会消失。

sessionStorage的生命周期是仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即便刷新页面或进入同源另外一个页面，数据依然存在。可是，sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不同的。

2.存储大小：localStorage和sessionStorage的存储数据大小通常都是：5MB

3.存储位置：都保存在客户端，不与服务器进行交互通讯。

4.存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可使用ECMAScript提供的JSON对象的stringify和parse来处理。

5.获取方式：localStorage:window.localStorage；sessionStorage: window.sessionStorage。

6.应用场景：localStorage:经常使用于长期登陆（+判断用户是否已登陆），适合长期保存在本地的数据。sessionStorage:敏感帐号一次性登陆。

WebStorage的优势：

（1）存储空间更大：cookie为4KB，而WebStorage是5MB；

（2）节省网络流量：WebStorage不会传送到服务器，存储在本地的数据能够直接获取，也不会像cookie同样美词请求都会传送到服务器，因此减小了客户端和服务器端的交互，节省了网络流量；

（3）对于那种只须要在用户浏览一组页面期间保存而关闭浏览器后就能够丢弃的数据，sessionStorage会很是方便；

（4）快速显示：有的数据存储在WebStorage上，再加上浏览器自己的缓存。获取数据时能够从本地获取会比从服务器端获取快得多，因此速度更快；

（5）安全性：WebStorage不会随着HTTP header发送到服务器端，因此安全性相对于cookie来讲比较高一些，不会担忧截获，可是仍然存在伪造问题；

（6）WebStorage提供了一些方法，数据操做比cookie方便；

　　　　setItem (key, value) —— 保存数据，以键值对的方式储存信息。

　　 getItem (key) —— 获取数据，将键值传入，便可获取到对应的value值。

　　removeItem (key) —— 删除单个数据，根据键值移除对应的信息。

　　clear () —— 删除全部的数据

　　key (index) —— 获取某个索引的key

3、localStorage的优点与局限

优点：

1.localStorage拓展了cookie的4k限制

2.localStorage能够将第一次请求的数据直接存储到本地，这个至关于一个5M大小的针对于前端页面的数据库，相比于cookie能够节约带宽，可是这个倒是只有在高版本的浏览器中才支持的。

局限：

1.浏览器的大小不统一，而且在IE8以上的IE版本才支持localStorage这个属性。

2.目前全部的浏览器中都会把localStorage的值类型限定为string类型，这个在对咱们平常比较常见的JSON对象类型须要一些转换。

3.localStorage在浏览器的隐私模式下面是不可读取的。

4.localStorage本质上是对字符串的读取，若是存储内容多的话会消耗内存空间，会致使页面变卡。

5.localStorage不能被爬虫抓取到。

localStorage与sessionStorage的惟一一点区别就是localStorage属于永久性存储，而sessionStorage属于当回话结束的时候，sessionStorage中的键值对会被清空。

4、localStorage的使用

localStorage的浏览器支持状况：

这里要特别声明一下，若是是使用IE浏览器的话，那么就要UserData来做为存储，这里主要讲解的是localStorage的内容。

首先在使用localStorage的时候，咱们须要判断浏览器是否支持localStorage这个属性

if(!window.localStorage){
                alert("浏览器支持localStorage");
                return false;
}else{
     //主逻辑业务
}

localStorage的写入，localStorage的写入有三种方法。

if(window.localStorage){
            alert("浏览器支持localStorage");
            return false;
        }else{
            var storage = window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.b=2;
            //写入c字段
            storage.setItem("c",3);
            console.log(typeof storage["a"]);
            console.log(typeof storage["b"]);
            console.log(typeof storage["c"]);
        }

注意：localStorage的使用也是遵循同源策略的，因此不一样的网站直接是不能共用相同的localStorage

最后在控制台上面打印出来的结果是：

刚刚存进去的是int类型，可是打印出来倒是string类型，这个与localStorage自己的特色有关，localStorage只支持string类型的存储。

localStorage的读取

if(window.localStorage){
            alert("浏览器支持localStorage");
            return false;
        }else{
            var storage = window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.b=2;
            //写入c字段
            storage.setItem("c",3);
            console.log(typeof storage["a"]);
            console.log(typeof storage["b"]);
            console.log(typeof storage["c"]);
            //第一种方法读取
            var a = storage.a;
            console.log(a);
            //第二种方法读取
            var b = storage["b"];
            console.log(b);
            //第三种方法读取
            var c = storage.getItem("c");
            console.log(c);
        }

这里面是三种对localStorage的读取，其中官方推荐的是getItem\setItem这两种方法对其进行存取，localStorage就是至关于一个前端的数据库的东西，数据库主要是增删查改这四个步骤，这里的读取和写入就至关于增、查的这两个步骤。

下面来讲一说localStorage的删、改这两个步骤

改这个步骤比较好理解，思路跟从新更改全局变量的值同样，以下

if(window.localStorage){
            alert("浏览器支持localStorage");
            return false;
        }else{
            var storage = window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.b=2;
            //写入c字段
            storage.setItem("c",3);
            console.log(storage.a);

            storage.a = 4;
            console.log(storage.a);

        }

localStorage的删除

1.将localStorage的全部内容清除

if(window.localStorage){
            alert("浏览器支持localStorage");
            return false;
        }else{
            var storage = window.localStorage;
            storage.a = 1;
            storage.setItem("c",3);
            console.log(storage);
            storage.clear();
            console.log(storage);
        }

2.将localStorage中的某个键值对删除

if(window.localStorage){
            alert("浏览器支持localStorage");
            return false;
        }else{
            var storage = window.localStorage;
            storage.a = 1;
            storage.setItem("c",3);
            console.log(storage);
            storage.removeItem("a");
            console.log(storage.a);
        }

控制台查看结果：

localStorage的键获取

if(window.localStorage){
            alert("浏览器支持localStorage");
            return false;
        }else{
            var storage = window.localStorage;
            storage.a = 1;
            storage.setItem("c",3);
            for(var i=0;i<storage.length;i++){
                var key=storage.key(i);
                console.log(key);
            }
        }

使用key()方法，向其中输入索引便可获取对应的键

4、localStorage的其余注意事项

通常咱们会将JSON存入localStorage中，可是在localStorage会自动将localStorage转换成字符串形式，这时咱们可使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串。

if(window.localStorage){
            alert("浏览器支持localStorage");
            return false;
        }else{
            var storage = window.localStorage;
            var data = {
                name: 'zhaosijia',
                sex: 'woman',
                hobby: 'program'
            };
            var d = JSON.stringify(data);
            storage.setItem("data",d);
            console.log(storage.data);
        }

读取以后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法

if(window.localStorage){
            alert("浏览器支持localStorage");
            return false;
        }else{
            var storage = window.localStorage;
            var data = {
                name: 'zhaosijia',
                sex: 'woman',
                hobby: 'program'
            };
            var d = JSON.stringify(data);
            storage.setItem("data",d);
            //将JSON字符串转换成为JSON对象输出
            var json = storage.getItem("data");
            var jsonObj = JSON.parse(json);
            console.log(storage.data);
        }

打印出来是Object对象，另外还有一点要注意的是，其余类型读取出来也要进行转换。