cookie,localStorage和sessionStorage,session的区别和使用

cookie,session,localStorage和sessionStorage的区别和使用

一、与服务器通信

cookie会每次都随着http自动发到服务端,也可以返回到前端,存在于http中,而sessionStorage和localStorage不会把数据发给服务器，仅在本地保存,另外cookie还有path路径的概念,可以限制其只属于某个路径下。sessionStorage和localStorage是H5的标准，cookie很早就存在了ES3里就有了。我们可以手动将sessionStorage,localStorage手动发给服务器，删除cookie就是把有效期设置为过去时；

二、存储大小限制不同

cookie：4k；
localStorage和sessionStorage：>=5M；

三、数据有效期不同

sessionStorage：仅在当前浏览器窗口关闭前有效 ，关闭就失效，但刷新不会；
localStorage：始终有效，窗口或者浏览器关闭仍然有效；
cookie：只在设置的cookie过期时间之前有效。

四、作用域不同

sessionStorage：在不同浏览器窗口共享，即使是同一页面，独立当前窗口的数据存在；
localStorage：在所有同源窗口共享；相当于全局变量；
cookie：也是在所有同源窗口共享；

五、通知机制和api接口

Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者；
一般cookie接口需要我们自己封装，Web Storage接口可以直接使用；

六、可操作性

cookie前后端都可操作，webStorage只能前端操作。

七、session的概念和其他三个没有关系（服务端操作）

Session是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据可以保存在集群、数据库、文件中；
Cookie是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现Session的一种方式。
1，session 在服务器端，cookie 在客户端（浏览器）
2，session 默认被存在在服务器的一个文件里（不是内存）
3，session 的运行依赖 session id，而 session id 是存在 cookie 中的，也就是说，如果浏览器禁用了 cookie ，同时 session 也会失效（但是可以通过其它方式实现，比如在 url 中传递 session_id）
4，session 可以放在 文件、数据库、或内存中都可以。
5，用户验证这种场合一般会用 session 因此，维持一个会话的核心就是客户端的唯一标识，即 session id

封装setCookie和getCookie

 var date=new Date();
        date.setMonth(11);
        setCookie({a:10,b:20,c:30,d:{e:10,f:20}},date);

        function setCookie(data,date){
            var str=date===undefined ? "" : ";expires="+date.toUTCString();
            for(var prop in data){
                var value=data[prop]
                if(typeof value==="object" && value!==null) value=JSON.stringify(value);
                document.cookie=prop+"="+value+str;
            }
        }

        function getCookie(){
            if(document.cookie.length===0) return {}
            return document.cookie.split(";").reduce((value,item)=>{
                var arr=item.split("=");
                var v=arr[1].trim();
                try{
                    v=JSON.parse(v);
                }catch(e){
                    
                }
                value[arr[0].trim()]=v;
                return value;
            },{})
        }

我们经常登录时的记住密码和免密登录，当我们清除cookie后就会消失，这就是cookie的一个用处；
另外可以保存上次浏览页面等
安全性较差；
sessionStorage,localStorage用处：
使用remove和clear来清除；
localStorage：
只有localStorage中的某个数据发生改变时，触发事件；也就是oldvalue和newvalue相同时不会触发；
在页面打开的状态下可以传递变量；
例如向购物车里面加入商品时；

阮一峰的同源政策

1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。
最初，它的含义是指，A网页设置的 Cookie，B网页不能打开，除非这两个网页”同源”。所谓”同源”指的是”三个相同”。
协议相同
域名相同
端口相同
举例来说，http://www.example.com/dir/page.html这个网址，协议是http://，域名是www.example.com，端口是80（默认端口可以省略）。它的同源情况如下。
http://www.example.com/dir2/other.html：同源
http://example.com/dir/other.html：不同源（域名不同）
http://v2.www.example.com/dir/other.html：不同源（域名不同）
http://www.example.com:81/dir/other.html：不同源（端口不同）

同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。
设想这样一种情况：A网站是一家银行，用户登录以后，又去浏览其他网站。如果其他网站可以读取A网站的 Cookie，会发生什么？
很显然，如果 Cookie 包含隐私（比如存款总额），这些信息就会泄漏。更可怕的是，Cookie 往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。因为浏览器同时还规定，提交表单不受同源政策的限制。
可见，”同源政策”是必需的，否则 Cookie 可以共享，互联网就毫无安全可言了。