cookie、sessionStorage、localStora

一：cookie

Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在

了解cookie

要表示唯一的一个cookie值需要：name、domain、path

一个cookie就是一个小型的文本文件

虽然cookie保存在浏览器端，但是一般是在服务器端设置的。

可以在HTTP返回体里，通过设置Set-Cookie来告诉浏览器端所要存储的cookie。

用来保存客户浏览器请求服务器页面的请求信息

cookie相关字段的说明

名称：一个唯一确定cookie的名称。cookie名称是不区分大小写的。cookie的名称必须是经过URL编码的。

值：储存在cookie中的字符串值。值必须被URL编码。

域：cookie对于哪个域是有效的。所有向该域发送的请求中都会包含这个cookie信息。如果没有明确设定，那么这个域会被认作来自设置cookie的那个域。

路径：对于指定域中的那个路径，应该向服务器发送cookie。例如，你可以指定cookie只有从http://www.wrox.com/books/中才能访问，那么http://www.wrox.com的页面就不会发送cookie信息，即使请求都是来自同一个域的。

失效时间：表示cookie何时应该被删除的时间戳（也就是，何时应该停止向服务器发送这个cookie）。默认情况下，浏览器会话结束时即将所有cookie删除；不过也可以自己设置删除时间。这个值是个GMT格式的日期（Wdy,DD-Mon-YYYY HH:MM:SSGMT），用于指定应该删除cookie的准确时间。因此，cookie可在浏览器关闭后依然保存在用户的机器上。如果你设置的失效日期是个以前的时间，则cookie会被立刻删除。

安全标志：指定后，cookie只有在使用SSL连接的时候才发送到服务器。例如，cookie信息只能发送给 https://www.wrox.com，而http://www.wrox.com的请求则不能发送 cookie。

cookie的应用场景

简单来说，Cookie就是服务器暂存放在你的电脑里的资料（.txt格式的文本文件），好让服务器用来辨认你的计算机。当你在浏览网站的时候，Web服务器会先送一小小资料放在你的计算机上，Cookie 会把你在网站上所打的文字或是一些选择都记录下来。当下次你再访问同一个网站，Web服务器会先看看有没有它上次留下的Cookie资料，有的话，就会依据Cookie里的内容来判断使用者，送出特定的网页内容给你。

网站可以利用cookie跟踪统计用户访问该网站的习惯，比如什么时间访问，访问了哪些页面，在每个网页的停留时间等。利用这些信息，一方面是可以为用户提供个性化的服务，另一方面，也可以作为了解所有用户行为的工具，对于网站经营策略的改进有一定参考价值。

目前Cookie最广泛的是记录用户登录信息，这样下次访问时可以不需要输入自己的用户名、密码了——当然这种方便也存在用户信息泄密的问题，尤其在多个用户共用一台电脑时很容易出现这样的问题。

设置／修改 cookie

cookie的原生的API，需要我们自己进行封装

//直接复制 【直接复制不是覆盖，而是追加】

document.cookie = 'name=value;'

//封装setCookie方法

//setCookie 首先对name和value进行编码

function setCookie(name,value,expires,path,domain,secure){

    var cookie = encodeURIComponent(name)+ '=' +encodeURIComponent(value);

    //注意分号后面要有空格

    //后面的4个参数是可选的，所以用if判断并追加

    if(expires){

        cookie +='; expires='+expires.toGMTString();

    }

    if(path){

        cookie += '; path='+path;

    }

    if(domain){

        cookie += '; domain='+domain;

    }

    if(secure){

        cookie += '; secure='+secure;

    }

    document.cookie = cookie;

}

删除cookie

输入参数为name、path、domain 这3个是唯一标识cookie的,将max-age设置为0，就可以立即删除了.

function remove(name,domain,path){

    document.cookie = 'name='+name

                    +'; domain='+domain

                    +'; path='+path

                    +'; max-age=0';

}

cookie缺点

Cookie数量和长度的限制。IE6或更低版本每个domian下最多20个cookie，IE7和之后的版本最多可以有 50个cookie，Firefox最多50个cookie，chrome和Safari没有做硬性限制，每个cookie长度不能超过4KB，否则会被截掉。

IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。这就导致不能永久储存信息。

安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。

并且每次你请求一个新的页面的时候，cookie只要满足作用域和作用路径，Cookie都会被发送过去，这样无形中浪费了带宽。

二：本地储存

Web Storage是为了在本地“存储”数据而生。html5中的 Web Storage 包括了两种存储方式：sessionStorage和localStorage

localStorage && sessionStorage：只要有效期和作用域，浏览器每次访问的时候都会将Storage载入到内存里。

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁

localStorage也受同源策略的限制。

localStorage和sessionStorage都具有相同的操作方法，如setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

三：区别

1、cookie、session区别

cookie 存储于浏览器端，而 session 存储于服务端

cookie 的安全性相比于 session 较弱，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗

考虑到安全应当使用session。

session 会在一定时间内保存在服务器上。当访问增多时，会占用服务器的资源，所以考虑到服务器性能方面，可以使用cookie

cookie 存储容量有限制，单个cookie 保存数据不能超过4k，且很多浏览器限制一个站点最多保存20个cookie。而对于 session ，其默认大小一般是1024k

2、cookie、sessionStorage、localStorage 异同点

html5 中 webStorage 包含 sessionStorage 和 localStorage

共同点：

都保存在浏览器端，且是同源的

区别：

cookie 数据始终在同源的http请求中携带，而 webStorage 不会再请求中携带，仅仅在本地存储

存储大小区别，cookie 是4k，webStorage 可以达到5M甚至更大

数据有效时间区别： sessionStorage 仅仅是会话级别的存储，它只在当前浏览器关闭前有效，不能持久保持；localStorage 始终有效，即使窗口或浏览器关闭也一直有效，除非用户手动删除，其才会失效；cookie 只在设置的 cookie 过期时间之前一直有效。

作用域区别：sessionStorage 不在不同的浏览器窗口中共享，即使是同一个页面； localStorage 和 cookie 在所有同源窗口是共享的

Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

3、web storage和cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

Cookies:服务器和客户端都可以访问；大小只有4KB左右；有有效期，过期后将会删除；

本地存储：只有本地浏览器端可访问数据，服务器不能访问本地存储直到故意通过POST或者GET的通道发送到服务器；每个域5MB；没有过期数据，它将保留知道用户从浏览器清除或者使用Javascript代码移除。