浅谈cookie localStorage sessionStorage

为了标识用户身份而存储在用户本地上的数据，cookie数据在同源的http请求中携带和传递的信息，localStorage sessionStorage不会把数据发送到服务器，只存储在本地，
另外cookie数据大小不能超过4k ，localStorage sessionStorage虽然也有存储大小的限制，但可以大很多，可以达到5M甚至更大；
localStorage存储永久数据，浏览器关闭数据依然存在除非主动去删除 sessionStorage临时会话，浏览器窗口关闭数据即自动删除 cookie可以设置有效期，数据一直存在到有效期结束

首先包含jQuery的库文件，在后面包含 jquery.cookie.js 的库文件。

of with all

使用方法

1.新添加一个会话 cookie：
$.cookie(‘the_cookie’, ‘the_value’);
注：当没有指明 cookie有效时间时，所创建的cookie有效期默认到用户关闭浏览器为止，所以被称为
“会话cookie（session cookie）”。
2.创建一个cookie并设置有效时间为 7天:
$.cookie(‘the_cookie’, ‘the_value’, { expires: 7 });
注：当指明了cookie有效时间时，所创建的cookie被称为“持久 cookie （persistent cookie）”。
3.创建一个cookie并设置 cookie的有效路径：
$.cookie(‘the_cookie’, ‘the_value’, { expires: 7, path: ‘/‘ });
注：在默认情况下，只有设置 cookie的网页才能读取该 cookie。如果想让一个页面读取另一个页面设
置的cookie，必须设置cookie的路径。cookie的路径用于设置能够读取 cookie的顶级目录。将这
个路径设置为网站的根目录，可以让所有网页都能互相读取 cookie （一般不要这样设置，防止出现冲突）。
4.读取cookie：
$.cookie(‘the_cookie’); // cookie存在 => ‘the_value’
$.cookie(‘not_existing’); // cookie不存在 => null
5.删除cookie，
通过传递null作为cookie的值即可：
$.cookie(‘the_cookie’, null);

———-相关参数的解释—————

1).expires: 365
定义cookie的有效时间，值可以是一个数字（从创建cookie时算起，以天为单位）或一个Date 对
象。如果省略，那么创建的cookie是会话cookie，将在用户退出浏览器时被删除。
2).path: ‘/‘
默认情况：只有设置cookie的网页才能读取该cookie。
定义cookie的有效路径。默认情况下，该参数的值为创建 cookie 的网页所在路径（标准浏览器的行为）。
如果你想在整个网站中访问这个cookie需要这样设置有效路径：path: ‘/‘。
如果你想删除一个定义了有效路径的 cookie，你需要在调用函数时包含这个路径: $.cookie(‘the_cookie’, null,
{ path: ‘/‘ });。
domain: ‘example.com’
默认值：创建 cookie的网页所拥有的域名。
3).secure: true
默认值：false。如果为true，cookie的传输需要使用安全协议（HTTPS）。
4).raw: true
默认值：false。
默认情况下，读取和写入 cookie 的时候自动进行编码和解码（使用encodeURIComponent 编码，
decodeURIComponent 解码）。
要关闭这个功能设置 raw: true 即可。
引自：http://wenku.baidu.com/view/0147277e27284b73f2425074.html
代码：http://files.cnblogs.com/Denny_Yang/jquery.cookie.js

localstorage

HTML5中提供了localStorage对象可以将数据长期保存在客户端，直到人为清除。
localStorage提供了几个方法:
1、存储：localStorage.setItem(key,value)
如果key存在时，更新value
2、获取：localStorage.getItem(key)
如果key不存在返回null
3、删除：localStorage.removeItem(key)
一旦删除，key对应的数据将会全部删除
4、全部清除：localStorage.clear()
某些时候使用removeItem逐个删除太麻烦，可以使用clear,执行的后果是会清除所有localStorage对象保存的数据
5、遍历localStorage存储的key
.length 数据总量，例：localStorage.length
.key(index) 获取key，例：var key=localStorage.key(index);
6、存储JSON格式数据
JSON.stringify(data) 将一个对象转换成JSON格式的数据串,返回转换后的串
JSON.parse(data) 将数据解析成对象，返回解析后的对象
备注：localStorage存数的数据是不能跨浏览器共用的，一个浏览器只能读取各自浏览器的数据,储存空间5M 。

附cookie源码

define(function() {
    return {
        get: function (name, encode) {
            var arg = name + "=";
            var alen = arg.length;
            var clen = document.cookie.length;
            var i = 0;
            var j = 0;
            while (i < clen) {
                j = i + alen;
                if (document.cookie.substring(i, j) == arg)
                    return this.getCookieVal(j, encode);
                i = document.cookie.indexOf(" ", i) + 1;
                if (i == 0)
                    break;
            }
            return null;
        },
        set: function (name, value, expires, path, domain, secure) {
            var argv = arguments;
            var argc = arguments.length;
            //        var expires = (argc > 2) ? argv[2] : null;
            var now = new Date();
            var expires = (argc > 2) ? argv[2] : new Date(now.getFullYear(), now.getMonth() + 1, now.getUTCDate());
            var path = (argc > 3) ? argv[3] : '/';
            var domain = (argc > 4) ? argv[4] : '.58.com';
            var secure = (argc > 5) ? argv[5] : false;
            document.cookie = name + "=" + escape(value) + ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + ((path == null) ? "" : ("; path=" + path)) + ((domain == null) ? "" : ("; domain=" + domain)) + ((secure == true) ? "; secure" : "");
        },
        remove: function (name) {
            //if (this.get(name))
            //    document.cookie = name + "=" + "; expires=Thu, 01-Jan-70 00:00:01 GMT";
            if (this.get(name)) this.set(name, "", new Date(1970, 1, 1));
        },
        getCookieVal: function(offset, encode){
            var endstr = document.cookie.indexOf(";", offset);
            if (endstr == -1) {
                endstr = document.cookie.length;
            }
            if (encode == false) return document.cookie.substring(offset, endstr);
            else return unescape(document.cookie.substring(offset, endstr));
        
        }
    };
});

额外补充

当cookie设置了除了0以外的具体时间的时候，小于0，这个cookie直接就过期，大于0，那就等到这个时间之后，cookie过期，不论其是否关闭浏览器
cookie机制采用的是在客户端保持状态的方案，而session机制采用的是在服务器端保持状态的方案

1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
考虑到减轻服务器性能方面，应当使用COOKIE。
4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
5、所以个人建议：
将登陆信息等重要信息存放为SESSION
其他信息如果需要保留，可以放在COOKIE中
知乎：
1.因为http是无状态的,每次请求都是一个独立过程,所以下一次请求无法得知上一次请求产生的一些数据因此产生了cookie,作用是在一次请求介绍后保存一些数据到客户端,客户端在下次请求时携带上这些数据来确定状态；
2.session是一般基于cookie的(session id也可以通过url参数进行传递),
原理是通过cookie在客户端保存一个唯一身份识别id然后再服务器内存或者数据库中对这个唯一身份进行关联,每次请求过来的时候通过这个id从内存或者数据库中取出相应数据;
3,session id在客户端可以通过cookie或者get post 参数,或者url地址的形式进行传递(只要与服务器进行约定方法非常多)默认是通过cookie实现的；
在服务器上session可以通过内存,文件,数据库等形式进行保存(java web中默认是存在内存中,django默认是存在数据库中,尚未发现存在文件中的)

```php
session
<?php
session_start();

if(isset($_SESSION[‘views’]))
$_SESSION[‘views’]=$_SESSION[‘views’]+1;

else
$_SESSION[‘views’]=1;
echo “Views=”. $_SESSION[‘views’];
?>
```匹配你

jquery.cookie.js 的配置

使用方法

localstorage

附cookie源码

额外补充

cookie 和session 的区别：