Cookie、SessionStorage、LocalStorage应用及区别

一、什么是Cookie？

Cookie是小量信息，由网络服务器发送出来以存储在网络浏览器上，从而下次这位独一无二的访客又回到该网络服务器时，可从该浏览器读回此信息。所以它具有一定得信息存储功能，但是并不是什么都存放在cookie中。

二、Cookie的作用

Cookies最典型的应用是判定注册用户是否已经登录网站，用户可能会得到提示，是否在下一次进入此网站时保留用户信息以便简化登录手续，这些都是Cookies的功用。
当然这些信息也并不是一直存放与你的浏览器中，Cookie有一个存放周期，可以通过代码自己决定存放周期，一般来说，我们都是在退出登陆的时候删除Cookie为了确保用户信息的安全。

三、如何应用Cookie

由于Cookie没有提供专门的API接口，所以需要我们自己来实现对于Cookie的操作:

class CookieHandle{
    setCookie(name,value,saveTime){
        let exdate = new Date();
        exdate.setDate(exdate.getDate()+saveTime)  //设置存储周期
        document.cookie = name + "=" + escape(value) + ((saveTime == null) ？ "" : ";expires="+exdate.toGMTString()) //设置cookie，并对信息进行一次加密
    }
    getCookie(name){
        let cookie = document.cookie;
        if(cookie.length>0){
            cookie_start = cookie.indexOf(name + "=") //通过name找到我们需要cookie是否存在
            if(cookie_start>-1){
                cookie_start = cookie_start + name.length + 1;
                cookie_end = cookie.indexOf(';',cookie_start)   //查询cookie结尾的位置
                if(cookie_end == -1){
                    cookie_end = cookie.length
                }
                return unescape(cookie.substring(cookie_start,cookie_end));  //返回找到的cookie的值并且解码
            }
        }
    }
    delCookie(name){
        document.cookie = name + '=0;expires=' + new Date(0).toUTCString()
    }
}

四、各大浏览器对于Cookie的限制

1、浏览器允许每个域名所包含的cookie数：

　　Microsoft指出InternetExplorer8增加cookie限制为每个域名50个，但IE7似乎也允许每个域名50个cookie。

　　Firefox每个域名cookie限制为50个。

　　Opera每个域名cookie限制为30个。

　　Safari/WebKit貌似没有cookie限制。但是如果cookie很多，则会使header大小超过服务器的处理的限制，会导致错误发生。

　　注：“每个域名cookie限制为20个”将不再正确！

2、当很多的cookie被设置，浏览器如何去响应。

　　除Safari（可以设置全部cookie，不管数量多少），有两个方法：

　　最少最近使用（leastrecentlyused(LRU)）的方法：当Cookie已达到限额，自动踢除最老的Cookie，以使给最新的Cookie一些空间。Internet Explorer和Opera使用此方法。

　　Firefox很独特：虽然最后的设置的Cookie始终保留，但似乎随机决定哪些cookie被保留。似乎没有任何计划（建议：在Firefox中不要超过Cookie限制）。

3、不同浏览器间cookie总大小也不同：

　　Firefox和Safari允许cookie多达4097个字节，包括名（name）、值（value）和等号。

　　Opera允许cookie多达4096个字节，包括：名（name）、值（value）和等号。

　　Internet Explorer允许cookie多达4095个字节，包括：名（name）、值（value）和等号。

      注：多字节字符计算为两个字节。在所有浏览器中，任何cookie大小超过限制都被忽略，且永远不会被设置。

来源：https://www.cnblogs.com/henry...

---

一、什么是Web Storage

它包含了两种机制：

• sessionStorage 为每一个给定的源（givenorigin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。
• localStorage 同样的功能，但是在浏览器关闭，然后重新打开后数据仍然存在。

请注意这里是sessionStorage而不是session，这两者有着千差万别。

二、Web Storage的作用

存储一些需要页面共享的信息，并且不需要向后台发送的信息。

三、如何使用Web Storage

localStorage.setItem('name', 'Tom'); //在localStorage中写入键名为name，值为Tom的信息
let cat = localStorage.getItem("name"); //获取localStorage中键名为name的值。
localStorage.removeItem("name");  //移除name。


sessionStorage.setItem('key', 'value'); // 保存数据到sessionStorage
let data = sessionStorage.getItem('key'); // 从sessionStorage获取数据
sessionStorage.removeItem('key');  // 从sessionStorage删除保存的数据
sessionStorage.clear();  // 从sessionStorage删除所有保存的数据

四、各大浏览器Web Storage的存储限制

IE 9          > 4999995 + 5 = 5000000
firefox 22.0 > 5242875 + 5 = 5242880
chrome  28.0  > 2621435 + 5 = 2621440
safari  5.1   > 2621435 + 5 = 2621440
opera   12.15 > 5M （超出则会弹出允许请求更多空间的对话框）

来源：https://blog.csdn.net/cengjin...

---

一、Cookie、SessionStorage、LocalStorage的区别
1、Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的，cookie的大小是受限的，并且每次请求一个新的页面的时候cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可跨域调用。
2、web storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。
3、cookie的作用是与服务器进行交互，作为http规范的一部分而存在的，而web Storage仅仅是为了在本地“存储”数据而生
4、sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念，sessionStorage是在同源的同窗口中，始终存在的数据，也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一个页面，数据仍然存在，关闭窗口后，sessionStorage就会被销毁，同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的。
来源：https://blog.csdn.net/ruby_xc...