localStorage、sessionStorage、cookies的区别

浏览器的缓存机制提供了能够将用户数据存储在客户端的方式，能够利用cookie,session等跟服务器进行交互。

HTML4地本地存储cookie

1、cookie与session

cookie和session都是用来跟踪浏览器用户身份的会话方式。

区别：

一、保持状态：cookie保存在浏览器端，session保存在服务器端

二、使用方式：

（1）cookie机制：若是不在浏览器中设置过时时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束。这种cookie简称会话cookie。

　　若是在浏览器中设置了cookie的过时时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过时时间结束才消失。

　　cookie是服务器发给客户端的特殊信息（cookie由服务端生成），cookie是以文本的方式保存在客户端，每次向服务器发送请求都带上cookie。

（2）session机制：当服务器收到请求须要建立session对象时，首先会检查客户端请求中是否包含sessionid。若是有sessionid，服务器根据id返回对应的session对象。当客户端请求中没有sessionid，服务器会建立新的session对象，并把sessionid在本次响应中返回给客户端。一般使用cookie方式存储sessionid到客户端，在交互中浏览器按照规则将sessionid发送给服务器。

若是用户禁用cookie，须要使用URL重写，能够经过response.encodeURL(url)进行实现；当浏览器支持cookie时，url不作任何处理；当浏览器不支持cookie时，将会重写URL将sessionid拼接到访问地址后。

（3）存储内容：

　　cookie只能保存字符串类型，以文本的方式；session经过相似于Hashtable的数据结构来保存，能支持任何类型的对象（session中可能含有多个对象）

（4）存储大小：

　　单个cookie保存的数据大小不能超过4kb；session大小没有限制。

（5）安全性：

　　针对cookie所存在的攻击：cookie欺骗，cookie截获；session的安全性大于cookie。

       缘由：

• sessionid存储在cookie中，若要攻破sessionid首先要攻破cookie。
• sessionid是要有人登陆或者启动session_start才会有，因此攻破cookie也不必定获得sessionid。（session_start是把用户提交的数据以全局变量的形式保存在session中，并生成惟一的sessionid）。
• 第二次启动session_start后，前一次的sessionid就是失效了，session过时后，sessionid也随之消失。
• sessionid是加密的。

 （6）应用场景

cookie：（1）实现自动登陆，记住密码。

　　　　　　下次自动登录的实现过程：

　　　　　　设置一个自动登录状态的标识符，用户登陆时将用户名、密码和该标识符发送到服务器端；若是勾选了“自动登陆”功能，服务器端会将sessionId、用户名以及加密后的密码发送给客户端而且保存在cookie中；若是没有勾选“自动登陆”功能，服务器端只返回一个sessionId。

　　　　（2）保存上次登陆的时间等信息。

　　　　（3）保存上次查看的页面

　　　　（4）浏览计数，跟踪用户访问该网站的习惯。好比什么时间访问，访问了哪些页面，在每一个页面的停留时间等。利用这些信息，一方面能够为用户提供个性化的服务，另外一方面，也能够做为了解全部用户行为的工具。

　　　　（5）购物车之类的处理，用户可能会在一段时间内在同一家网站的不一样页面中选择不一样的商品，这些信息都会写入cookie中，以便在最后付款的时候提取信息。

session：用于保存每一个用户的专用信息，变量的值保存在服务器端，经过sessionid来区分不一样的用户。

　　　　（1）网上商城中的购物车

　　　　（2）保存用户登录信息

　　　　（3）将某些数据存放入session中，供同一用户的不一样页面使用

　　　　（4）防止用户非法登录

（7）缺点

cookie：（1）大小受限，每一个特定的域名下最多生成的cookie个数有限制，当超过限制时，IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie

　　　　（2）用户能够操做cookie，使功能受限

　　　　（3）安全性较低，若是cookie被截获，那人就能够取得全部的session信息。

　　　　（4）有些状态不可能保存在客户端

　　　　（5）每次访问都要传送cookie给服务器，浪费带宽。cookie是随HTTP事务一块儿被发送的，所以会浪费一部分发送cookie时使用的带宽。

　　　　（6）cookie数据有路径的概念，能够限制cookie只属于某个路径下

session:（1）session保存的东西越多，就越占用服务器内存，对于用户在线较多的网站，服务器的内存压力会很大。

　　　  （2）依赖cookie（sessionid保存在cookie），若是禁用cookie，则要使用url重写，不安全

　　　  （3）建立session变量有很大的随意性，可随时调用，不须要开发者作精确地处理，因此，过分使用session变量将会致使代码不可读且很差维护。

　　服务器端根据Cookie中的信息判断用户是否登录，那若是浏览器中禁用Cookie，怎么保障整个机制的正常运转？

　　（1）在每次请求中都携带SessionID的参数；

　　（2）Token机制。Token机制多用于App客户端和服务器交互的模式，也可用在web端作状态管理。当用户第一次登录时，服务器根据用户提交的信息生成一个Token，响应时将Token发送到客户端，之后客户端只需携带上这个Token前来请求数据便可，无需再次登录验证。

 

 

 

HTML5的web Storage提供了两种API：localStorage(本地存储)和sessionStorage(会话存储)

　　web Storage是对cookie的一个改善，因为cookie存储机制有不少缺点，HTML5再也不使用它，转而使用改良后的web Storage存储机制。本地数据库是HTML5中新增的一个功能，使用它能够在客户端本地创建一个数据库，本来必须保存在服务端数据库中的内容如今能够直接保存在客户端本地了，大大减轻了服务端的负担，同时也加快了访问数据的速度。

（1）生命周期：

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

sessionStorage的生命周期仅在当前会话有效。在关闭浏览器窗口就会销毁。

（2）存储大小

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

（3）存储位置

　　都保存在客户端，不与服务器进行交互通讯。

（4）存储内容类型

　　只能存储字符串类型，对于复杂的对象可使用stringify和parse来处理

（5）获取方式

　　localStorage:window.localStorage;sessionStorage:window.sessionStorage;

（6）应用场景

　　cookie存储的数据量比较小，因此通常不会存大量数据，存储的通常是与服务器交互的数据，好比登陆信息、设置信息（要求后端动态渲染的设置）。

 

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

 　  localStorage能够用于存储该浏览器对该页面的访问次数，固然，若是换个浏览器，这个次数就须要从新计数了。还能够用来存储一些固定不变的页面信息，这样就不用每次都从新加载了。用于前端作统计，后端只须要一个统计结果之类的。

if (localStorage.pagecount){
     localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else{
     localStorage.pagecount=1;
}
console.log("visits:"+localStorage.pagecount);

 

 

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

 

注意：

不一样tab页中localStorage是互相影响的。在一个tab1中设置localStorage.name=1，在另外一个tab2中设置localStorage.name=2，此时再返回tab1中获取name值为2

在不一样tab页中sessionStorage是互不影响的，在一个tab1中设置localStorage.name=1，在tab2中获取name的值为undefined。