cookie与session的总结简介

1、cookie的作用：

我们在浏览器中，经常涉及到数据的交换，比如你登录邮箱，登录一个页面。我们经常会在此时设置30天内记住我，或者自动登录选项。那么它们是怎么记录信息的呢，答案就是今天的主角cookie了，Cookie是由HTTP服务器设置的，保存在浏览器中，但HTTP协议是一种无状态协议，在数据交换完毕后，服务器端和客户端的链接就会关闭，每次交换数据都需要建立新的链接。就像我们去超市买东西，没有积分卡的情况下，我们买完东西之后，超市没有我们的任何消费信息，但我们办了积分卡之后，超市就有了我们的消费信息。cookie就像是积分卡，可以保存积分，商品就是我们的信息，超市的系统就像服务器后台，http协议就是交易的过程。

2、机制的区别：

session机制采用的是在服务器端保持状态的方案，而cookie机制则是在客户端保持状态的方案，cookie又叫会话跟踪机制。打开一次浏览器到关闭浏览器算是一次会话。说到这里，讲下HTTP协议，前面提到，HTTP协议是一种无状态协议，在数据交换完毕后，服务器端和客户端的链接就会关闭，每次交换数据都需要建立新的链接。此时，服务器无法从链接上跟踪会话。cookie可以跟踪会话，弥补HTTP无状态协议的不足。

3、cookie的分类：

cookie分为会话cookie和持久cookie，会话cookie是指在不设定它的生命周期expires时的状态，前面说了，浏览器的开启到关闭就是一次会话，当关闭浏览器时，会话cookie就会跟随浏览器而销毁。当关闭一个页面时，不影响会话cookie的销毁。会话cookie就像我们没有办理积分卡时，单一的买卖过程，离开之后，信息则销毁。

持久cookie则是设定了它的生命周期expires，此时，cookie像商品一样，有个保质期，关闭浏览器之后，它不会销毁，直到设定的过期时间。对于持久cookie，可以在同一个浏览器中传递数据，比如，你在打开一个淘宝页面登陆后，你在点开一个商品页面，依然是登录状态，即便你关闭了浏览器，再次开启浏览器，依然会是登录状态。这就是因为cookie自动将数据传送到服务器端，在反馈回来的结果。持久cookie就像是我们办理了一张积分卡，即便离开，信息一直保留，直到时间到期，信息销毁。

4、简单的使用cookie的代码

cookie的几种常见属性：document.cookie="key=value;expires=失效时间;path=路径;domain=域名;secure;(secure表安全级别）,

cookie以字符串的形式保存在浏览器中。下面贴段代码出来，是一个类似购物网站的将商品添加到购物车，再从购物车还原商品信息的过程，是自己用原生JS封装的函数。

封装的cookie的存入，读取以及删除的函数：（这里是将信息以对象的形式存放到cookie中的，会用到JSON的知识)

1. // key : cookie 名
2. // value : cookie 值
3. // options : 可选配置参数
4. // options = {
5. // expires : 7|new Date(), // 失效时间
6. // path : "/", // 路径
7. // domain : "", // 域名
8. // secure : true // 安全连接
9. // }
10. function cookie(key, value, options) {
11. /* read 读取 */
12. // 如果没有传递 value ，则表示根据 key 读取 cookie 值
13. if ( typeof value === "undefined") { // 读取
14. // 获取当前域下所有的 cookie，保存到 cookies 数组中
15. var cookies = document.cookie.split( "; ");
16. // 遍历 cookies 数组中的每个元素
17. for ( var i = 0, len = cookies.length; i < len; i++) {
18. // cookies[i] : 当前遍历到的元素，代表的是 "key=value" 意思的字符串，
19. // 将字符串以 = 号分割返回的数组中第一个元素表示 key，
20. // 第二个元素表示 value
21. var cookie = cookies[i].split( "=");
22. // 判断是否是要查找的 key，对查找的 key 、value 都要做解码操作
23. if ( decodeURIComponent(cookie[ 0]) === key) {
24. return decodeURIComponent(cookie[ 1]);
25. }
26. }
27. // 没有查找到指定的 key 对应的 value 值，则返回 null
28. return null;
29. }
31. /* 存入 设置 */
32. // 设置 options 默认为空对象
33. options = options || {};
34. // key = value，对象 key，value 编码
35. var cookie = encodeURIComponent(key) + "=" + encodeURIComponent(value);
36. // 失效时间
37. if (( typeof options.expires) !== "undefined") { // 有配置失效时间
38. if ( typeof options.expires === "number") { // 失效时间为数字
39. var days = options.expires,
40. t = options.expires = new Date();
41. t.setDate(t.getDate() + days);
42. }
43. cookie += ";expires=" + options.expires.toUTCString();
44. }
45. // 路径
46. if ( typeof options.path !== "undefined")
47. cookie += ";path=" + options.path;
48. // 域名
49. if ( typeof options.domain !== "undefined")
50. cookie += ";domain=" + options.domain;
51. // 安全连接
52. if (options.secure)
53. cookie += ";secure";
55. // 保存
56. document.cookie = cookie;
57. }
59. // 从所有的 cookie 中删除指定的 cookie
60. function removeCookie(key, options) {
61. options = options || {};
62. options.expires = -1; // 将失效时间设置为 1 天前
63. cookie(key, "", options);
64. }

下面是商品详情页的JS代码

1. // 找到所有的 “添加到购物车” 超级链接
2. var links = $( "a", $( "#tab"));
3. // 循环，为每个 “添加到购物车” 的超级链接添加点击事件
4. for ( var i = 0, len = links.length; i < len; i++) {
5. links[i].onclick = function(){
6. // 获取当前超级链接所在行的所有单元格
7. var _cells = this.parentNode.parentNode.cells;
8. // 获取到即将添加到购物车中的商品信息
9. var _id = _cells[ 0].innerHTML,
10. _name = _cells[ 1].innerHTML,
11. _price = _cells[ 2].innerHTML;
12. // 将商品信息包装到一个对象中
13. var product = {
14. id : _id,
15. name : _name,
16. price : _price,
17. amount : 1
18. };
20. /* 将当前选购的商品对象保存到 cookie 中去 */
21. // 从 cookie 中读取已有的保存购物车的数组结构
22. var _products = cookie( "products");
23. if (_products === null) // cookie 中不存在 products 名的 cookie
24. _products = [];
25. else // 存在，则解析 cookie 读取到的字符串为 数组 结构
26. _products = JSON.parse(_products);
28. // 将当前选购的商品追加到数组中保存
29. _products.push(product);
30. // 继续将 _products 数组内容存回 cookie
31. cookie( "products", JSON.stringify(_products), { expires: 7});
32. }
33. }

html代码，css代码大家可以自己写

1. <table id= "tab">
2. <tr>
3. <td>序号 </td>
4. <td>名称 </td>
5. <td>价格 </td>
6. <td>操作 </td>
7. </tr>
8. <tr>
9. <td>1</td>
10. <td>空调< /td>
11. <td>3999</td>
12. <td><a href="javascript:void(0);">添加到购物车</a></td>
13. < /tr>
14. <tr>
15. <td>2</td>
16. <td>风扇</td>
17. <td> 288< /td>
18. <td><a href="javascript:void(0);">添加到购物车</a> </td>
19. < /tr>
20. </table>
21. <a href="cart_购物车.html" target="_blank">查看购物车</a>

购物车还原商品信息：

1. // 从 cookie 中读取购物车已有的商品信息
2. var _products = cookie( "products");
3. // 判断购物车是否有商品
4. if (_products === null || (_products = JSON.parse(_products)).length === 0)
5. return;
7. // 如果有商品，则显示到页面中
8. $( ".result")[ 0].innerHTML = "";
9. for ( var i = 0, len = _products.length; i < len; i++) {
10. // 当前遍历到的商品对象
11. var prod = _products[i];
12. // 克隆 .row 的节点
13. var _row = $( ".row")[ 0].cloneNode( true);
14. // 将当前商品对象的信息替换节点中对应的部分，用class名获取到的节点返回类型是一个数组所以要在后面加上[0]
15. $( ".index", _row)[ 0].innerHTML = prod.id; // 编号
16. $( ".name", _row)[ 0].innerHTML = prod.name; // 名称
17. $( ".price", _row)[ 0].innerHTML = prod.price; // 价格
18. $( ".amount", _row)[ 0].innerHTML = prod.amount; // 数量
19. $( ".oper", _row)[ 0].innerHTML = "<a href='javascript:void(0);'>删除</a>"
21. // 将克隆的节点副本追加到 .result 的 div 中
22. $( ".result")[ 0].appendChild(_row);
23. };
25. // 为每个 “删除” 的超级链接绑定点击事件
26. var links = $( "a", $( "#container"));
27. for ( var i = 0, len = links.length; i < len; i++) {
28. // links[i].index = i; // 为当前遍历到的超级链接附加数据
29. links[i].product = _products[i]; //
30. links[i].onclick = function(){
31. // alert("你点击的是第" + (this.index + 1) + "个连接");
32. var index = inArray( this.product, _products);
34. if (index !== -1) {
35. _products.splice(index, 1);
36. }
37. // 更新 cookie
38. cookie( "products", JSON.stringify(_products), { expires: 7});
40. // 找出页面中待删除的行
41. var _row = this.parentNode.parentNode;
42. _row.parentNode.removeChild(_row);
43. };
44. }

这里的$(' ')函数是自己封装的函数，用于获取到DOM节点，可以看下我关于getElementsByClassName的兼容那篇文章。

购物车的html代码

1. <div id="container">
2. <div class="row">
3. <div class="index">商品编号 </div>
4. <div class="name">商品名称 </div>
5. <div class="price">价格 </div>
6. <div class="amount">数量 </div>
7. <div class="oper">操作 </div>
8. </div>
9. <div class="result" style="clear:both;">
10. 购物车为空
11. </div>
12. </div>