HTML5本地存储Localstorage

什么是localstorage

前几天在老项目中发现有对cookie的操作觉得很奇怪,咨询下来是要缓存一些信息,以避免在URL上面传递参数,但没有考虑过cookie会带来什么问题:

① cookie大小限制在4k左右,不适合存业务数据
② cookie每次随HTTP事务一起发送,浪费带宽

我们是做移动项目的,所以这里真实适合使用的技术是localstorage,localstorage可以说是对cookie的优化,使用它可以方便在客户端存储数据,并且不会随着HTTP传输,但也不是没有问题:

① localstorage大小限制在500万字符左右,各个浏览器不一致
② localstorage在隐私模式下不可读取
③ localstorage本质是在读写文件,数据多的话会比较卡(firefox会一次性将数据导入内存,想想就觉得吓人啊)
④ localstorage不能被爬虫爬取,不要用它完全取代URL传参

瑕不掩瑜,以上问题皆可避免,所以我们的关注点应该放在如何使用localstorage上,并且是如何正确使用。

cookie和session,cookiesession

一、Cookie、session和localStorage的区别

localstorage的使用

学习目标

cookie的内容主要包括:名字、值、过期时间、路径和域。路径与域一起构成cookie的作用范围。若不设置时间,则表示这个cookie的生命期为浏览器会话期间,关闭浏览器窗口,cookie就会消失。这种生命期为浏览器会话期的cookie被称为会话cookie。 

基础知识

localstorage存储对象分为两种:

① sessionStrage:
session即会话的意思,在这里的session是指用户浏览某个网站时,从进入网站到关闭网站这个时间段,session对象的有效期就只有这么长。

② localStorage:
将数据保存在客户端硬件设备上,不管它是什么,意思就是下次打开计算机时候数据还在。

两者区别就是一个作为临时保存,一个长期保存。

这里来一段简单的代码说明其基本使用:

<div id="msg" style="margin: 10px 0; border: 1px solid black; padding: 10px; width: 300px;
  height: 100px;">
</div>
<input type="text" id="text" />
<select id="type">
  <option value="session">sessionStorage</option>
  <option value="local">localStorage</option>
</select>
<button onclick="save();">
  保存数据</button>
<button onclick="load();">
  读取数据</button>
<script type="text/javascript">
  var msg = document.getElementById('msg'),
            text = document.getElementById('text'),
            type = document.getElementById('type');

  function save() {
    var str = text.value;
    var t = type.value;
    if (t == 'session') {
      sessionStorage.setItem('msg', str);
    } else {
      localStorage.setItem('msg', str);
    }
  }

  function load() {
    var t = type.value;
    if (t == 'session') {
      msg.innerHTML = sessionStorage.getItem('msg');
    } else {
      msg.innerHTML = localStorage.getItem('msg');
    }
  }
</script>

会话及其会话技术:

会话cookie一般不存储在硬盘而是保存在内存里,当然这个行为并不是规范规定的。若设置了过期时间,浏览器就会把cookie保存到硬盘上,关闭后再打开浏览器这些cookie仍然有效直到超过设定的过期时间。对于保存在内存里的cookie,不同的浏览器有不同的处理方式session机制。 

真实场景

实际工作中对localstorage的使用一般有以下需求:

① 缓存一般信息,如搜索页的出发城市,达到城市,非实时定位信息

② 缓存城市列表数据,这个数据往往比较大


每条缓存信息需要可追踪,比如服务器通知城市数据更新,这个时候在最近一次访问的时候要自动设置过期

④ 每条信息具有过期日期状态,在过期外时间需要由服务器拉取数据

⑤ ……

define([], function () {

  var Storage = _.inherit({
    //默认属性
    propertys: function () {

      //代理对象,默认为localstorage
      this.sProxy = window.localStorage;

      //60 * 60 * 24 * 30 * 1000 ms ==30天
      this.defaultLifeTime = 2592000000;

      //本地缓存用以存放所有localstorage键值与过期日期的映射
      this.keyCache = 'SYSTEM_KEY_TIMEOUT_MAP';

      //当缓存容量已满,每次删除的缓存数
      this.removeNum = 5;

    },

    assert: function () {
      if (this.sProxy === null) {
        throw 'not override sProxy property';
      }
    },

    initialize: function (opts) {
      this.propertys();
      this.assert();
    },

    /*
    新增localstorage
    数据格式包括唯一键值,json字符串,过期日期,存入日期
    sign 为格式化后的请求参数,用于同一请求不同参数时候返回新数据,比如列表为北京的城市,后切换为上海,会判断tag不同而更新缓存数据,tag相当于签名
    每一键值只会缓存一条信息
    */
    set: function (key, value, timeout, sign) {
      var _d = new Date();
      //存入日期
      var indate = _d.getTime();

      //最终保存的数据
      var entity = null;

      if (!timeout) {
        _d.setTime(_d.getTime() + this.defaultLifeTime);
        timeout = _d.getTime();
      }

      //
      this.setKeyCache(key, timeout);
      entity = this.buildStorageObj(value, indate, timeout, sign);

      try {
        this.sProxy.setItem(key, JSON.stringify(entity));
        return true;
      } catch (e) {
        //localstorage写满时,全清掉
        if (e.name == 'QuotaExceededError') {
          //            this.sProxy.clear();
          //localstorage写满时,选择离过期时间最近的数据删除,这样也会有些影响,但是感觉比全清除好些,如果缓存过多,此过程比较耗时,100ms以内
          if (!this.removeLastCache()) throw '本次数据存储量过大';
          this.set(key, value, timeout, sign);
        }
        console && console.log(e);
      }
      return false;
    },

    //删除过期缓存
    removeOverdueCache: function () {
      var tmpObj = null, i, len;

      var now = new Date().getTime();
      //取出键值对
      var cacheStr = this.sProxy.getItem(this.keyCache);
      var cacheMap = [];
      var newMap = [];
      if (!cacheStr) {
        return;
      }

      cacheMap = JSON.parse(cacheStr);

      for (i = 0, len = cacheMap.length; i < len; i++) {
        tmpObj = cacheMap[i];
        if (tmpObj.timeout < now) {
          this.sProxy.removeItem(tmpObj.key);
        } else {
          newMap.push(tmpObj);
        }
      }
      this.sProxy.setItem(this.keyCache, JSON.stringify(newMap));

    },

    removeLastCache: function () {
      var i, len;
      var num = this.removeNum || 5;

      //取出键值对
      var cacheStr = this.sProxy.getItem(this.keyCache);
      var cacheMap = [];
      var delMap = [];

      //说明本次存储过大
      if (!cacheStr) return false;

      cacheMap.sort(function (a, b) {
        return a.timeout - b.timeout;
      });

      //删除了哪些数据
      delMap = cacheMap.splice(0, num);
      for (i = 0, len = delMap.length; i < len; i++) {
        this.sProxy.removeItem(delMap[i].key);
      }

      this.sProxy.setItem(this.keyCache, JSON.stringify(cacheMap));
      return true;
    },

    setKeyCache: function (key, timeout) {
      if (!key || !timeout || timeout < new Date().getTime()) return;
      var i, len, tmpObj;

      //获取当前已经缓存的键值字符串
      var oldstr = this.sProxy.getItem(this.keyCache);
      var oldMap = [];
      //当前key是否已经存在
      var flag = false;
      var obj = {};
      obj.key = key;
      obj.timeout = timeout;

      if (oldstr) {
        oldMap = JSON.parse(oldstr);
        if (!_.isArray(oldMap)) oldMap = [];
      }

      for (i = 0, len = oldMap.length; i < len; i++) {
        tmpObj = oldMap[i];
        if (tmpObj.key == key) {
          oldMap[i] = obj;
          flag = true;
          break;
        }
      }
      if (!flag) oldMap.push(obj);
      //最后将新数组放到缓存中
      this.sProxy.setItem(this.keyCache, JSON.stringify(oldMap));

    },

    buildStorageObj: function (value, indate, timeout, sign) {
      var obj = {
        value: value,
        timeout: timeout,
        sign: sign,
        indate: indate
      };
      return obj;
    },

    get: function (key, sign) {
      var result, now = new Date().getTime();
      try {
        result = this.sProxy.getItem(key);
        if (!result) return null;
        result = JSON.parse(result);

        //数据过期
        if (result.timeout < now) return null;

        //需要验证签名
        if (sign) {
          if (sign === result.sign)
            return result.value;
          return null;
        } else {
          return result.value;
        }

      } catch (e) {
        console && console.log(e);
      }
      return null;
    },

    //获取签名
    getSign: function (key) {
      var result, sign = null;
      try {
        result = this.sProxy.getItem(key);
        if (result) {
          result = JSON.parse(result);
          sign = result && result.sign
        }
      } catch (e) {
        console && console.log(e);
      }
      return sign;
    },

    remove: function (key) {
      return this.sProxy.removeItem(key);
    },

    clear: function () {
      this.sProxy.clear();
    }
  });

  Storage.getInstance = function () {
    if (this.instance) {
      return this.instance;
    } else {
      return this.instance = new this();
    }
  };

  return Storage;

});

这段代码包含了localstorage的基本操作,并且对以上问题做了处理,而真实的使用还要再抽象:

define(['AbstractStorage'], function (AbstractStorage) {

  var Store = _.inherit({
    //默认属性
    propertys: function () {

      //每个对象一定要具有存储键,并且不能重复
      this.key = null;

      //默认一条数据的生命周期,S为秒,M为分,D为天
      this.lifeTime = '30M';

      //默认返回数据
      //      this.defaultData = null;

      //代理对象,localstorage对象
      this.sProxy = new AbstractStorage();

    },

    setOption: function (options) {
      _.extend(this, options);
    },

    assert: function () {
      if (this.key === null) {
        throw 'not override key property';
      }
      if (this.sProxy === null) {
        throw 'not override sProxy property';
      }
    },

    initialize: function (opts) {
      this.propertys();
      this.setOption(opts);
      this.assert();
    },

    _getLifeTime: function () {
      var timeout = 0;
      var str = this.lifeTime;
      var unit = str.charAt(str.length - 1);
      var num = str.substring(0, str.length - 1);
      var Map = {
        D: 86400,
        H: 3600,
        M: 60,
        S: 1
      };
      if (typeof unit == 'string') {
        unit = unit.toUpperCase();
      }
      timeout = num;
      if (unit) timeout = Map[unit];

      //单位为毫秒
      return num * timeout * 1000 ;
    },

    //缓存数据
    set: function (value, sign) {
      //获取过期时间
      var timeout = new Date();
      timeout.setTime(timeout.getTime() + this._getLifeTime());
      this.sProxy.set(this.key, value, timeout.getTime(), sign);
    },

    //设置单个属性
    setAttr: function (name, value, sign) {
      var key, obj;
      if (_.isObject(name)) {
        for (key in name) {
          if (name.hasOwnProperty(key)) this.setAttr(k, name[k], value);
        }
        return;
      }

      if (!sign) sign = this.getSign();

      //获取当前对象
      obj = this.get(sign) || {};
      if (!obj) return;
      obj[name] = value;
      this.set(obj, sign);

    },

    getSign: function () {
      return this.sProxy.getSign(this.key);
    },

    remove: function () {
      this.sProxy.remove(this.key);
    },

    removeAttr: function (attrName) {
      var obj = this.get() || {};
      if (obj[attrName]) {
        delete obj[attrName];
      }
      this.set(obj);
    },

    get: function (sign) {
      var result = [], isEmpty = true, a;
      var obj = this.sProxy.get(this.key, sign);
      var type = typeof obj;
      var o = { 'string': true, 'number': true, 'boolean': true };
      if (o[type]) return obj;

      if (_.isArray(obj)) {
        for (var i = 0, len = obj.length; i < len; i++) {
          result[i] = obj[i];
        }
      } else if (_.isObject(obj)) {
        result = obj;
      }

      for (a in result) {
        isEmpty = false;
        break;
      }
      return !isEmpty ? result : null;
    },

    getAttr: function (attrName, tag) {
      var obj = this.get(tag);
      var attrVal = null;
      if (obj) {
        attrVal = obj[attrName];
      }
      return attrVal;
    }

  });

  Store.getInstance = function () {
    if (this.instance) {
      return this.instance;
    } else {
      return this.instance = new this();
    }
  };

  return Store;
});

我们真实使用的时候是使用store这个类操作localstorage,代码结束简单测试:

图片 1

图片 2

存储完成,以后都不会走请求,于是今天的代码基本结束 ,最后在android
Hybrid中有一后退按钮,此按钮一旦按下会回到上一个页面,这个时候里面的localstorage可能会读取失效!一个简单不靠谱的解决方案是在webapp中加入:

window.onunload = function () { };//适合单页应用,不要问我为什么,我也不知道

1、会话

 什么是会话?

  用户打开浏览器,访问一个网站进行一系列操作,关闭浏览器离开,完整过程
就是会话

 会话过程中要解决的一些问题:

  • 每个用户与服务器进行交互的过程中,各自会有一些数据,程序要想办法保存每个用户的数据;
  • 例如:用户点击超链接通过一个servlet购买了一个商品,程序应该保存用户购买的商品,以便用户点击结账servlet时,结账servlet可以得到用户商品为用户结账;
  • 思考:用户购买的商品保存在request或servletContext中行不行?
    不可以,原理分析:
    图片 3

当程序需要为某个客户端的请求创建一个session时,服务器首先检查这个客户端的请求里是否已包含了一个session标识(称为session
id),如果已包含则说明以前已经为此客户端创建过session,服务器就按照session
id把这个session检索出来使用(检索不到,会新建一个),如果客户端请求不包含session
id,则为客户端创建一个session并且生成一个与此session相关联的session
id,session
id的值应该是一个既不会重复,又不容易被找到规律以仿造的字符串,这个session
id将被在本次响应中返回给客户端保存。保存这个session
id的方式可以采用cookie,这样在交互过程中浏览器可以自动的按照规则把这个标识发送给服务器。

结语

localstorage是移动开发必不可少的技术点,需要深入了解,具体业务代码后续会放到git上,有兴趣的朋友可以去了解

2、cookie技术

 一种将用户信息保存在客户端技术
,客户端会将cookie信息自动发送给服务器。

  图片 4

二、cookie和session的区别: 

 2.1、cookieAPI介绍

  图片 5

  • 代码示例:
     1 import java.io.IOException;
     2 
     3 import javax.servlet.ServletException;
     4 import javax.servlet.http.Cookie;
     5 import javax.servlet.http.HttpServlet;
     6 import javax.servlet.http.HttpServletRequest;
     7 import javax.servlet.http.HttpServletResponse;
     8 
     9 public class CookieDemo1 extends HttpServlet {
    10 
    11     public void doGet(HttpServletRequest request, HttpServletResponse response)
    12             throws ServletException, IOException {
    13         doPost(request, response);
    14 
    15     }
    16 
    17     public void doPost(HttpServletRequest request, HttpServletResponse response)
    18             throws ServletException, IOException {
    19         //   开始coding................
    20         /**
    21          * 向浏览器发送cookie 信息 api 演示
    22          */
    23         // 1: 创建一个cookie 对象
    24         // 第一个参数 cookie 名称 第二个参数 保存该cookie 的值 cookie是不能存储中文信息
    25         Cookie cookie = new Cookie("cc", "hellocookieCC");
    26         // 默认cookie 会话结束 cookie 失效 会话机制的cookie
    27         cookie.setMaxAge(3600 * 24 * 7);// 设置浏览器保存cookie 信息的有效时间 持久化cookie
    28         // 2: 发送给浏览器 response 对象发送cookie
    29         // 3: 设置cookie 访问的有效路径
    30         cookie.setPath("/");// cookie 的有效路径 表示 /day11/aa
    31                                     // 下面的所有目录都可以访问该cookie
    32 
    33         // 结论 cookie path 设置 /
    34         // 发送cookie 到 浏览器
    35         response.addCookie(cookie);
    36 
    37     }
    38 
    39 }

  图片 6

1、cookie数据存放在客户的浏览器上,session数据放在服务器上 

 2.2、cookieAPI详解

  • 读取cookie
    request.getCookies() 返回Cookie[]
      首先判断cookies数组是否存在 cookies ==
    null,如果cookies存在,根据cookie的name去查找指定cookie
    代码示例:

     1 import java.io.IOException;
     2 
     3 import javax.servlet.ServletException;
     4 import javax.servlet.http.Cookie;
     5 import javax.servlet.http.HttpServlet;
     6 import javax.servlet.http.HttpServletRequest;
     7 import javax.servlet.http.HttpServletResponse;
     8 
     9 public class GetCookie extends HttpServlet {
    10 
    11     public void doGet(HttpServletRequest request, HttpServletResponse response)
    12             throws ServletException, IOException {
    13         doPost(request, response);
    14 
    15     }
    16 
    17     public void doPost(HttpServletRequest request, HttpServletResponse response)
    18             throws ServletException, IOException {
    19         //   开始coding................
    20         /**
    21          * 获取浏览器保存的cookie 信息 浏览器发送 .... 浏览器每次发送请求,都携带cookie信息,这是浏览器本身的机制
    22          */
    23         // 1: 获取cookie信息 ... 对象 request
    24         Cookie[] cookies = request.getCookies();// 获取cookie 数组 空?
    25 
    26         for (Cookie cookie : cookies) {
    27             System.out.println(cookie.getName() + "----" + cookie.getValue()
    28                     + "-----" + cookie.getPath());
    29         }
    30 
    31     }
    32 
    33 }
    
     1 import javax.servlet.http.Cookie;
     2 
     3 public class CookieUtils {
     4 
     5     public static Cookie getCookie(String name, Cookie[] cookies) {
     6         // 通过cookie name 在所有cookie 返回指定 的cookie
     7         if (cookies == null) {
     8             return null;
     9         } else {
    10             for (Cookie cookie : cookies) {
    11                 if (cookie.getName().equals(name)) {
    12                     return cookie;
    13                 }
    14             }
    15         }
    16         return null;
    17     }
    18 
    19 }
    
  • 服务器向客户端发送cookie

    cookie对象创建 new Cookie(name,value)

    response.addCookie(cookie) 将cookie发送客户端 保存到浏览器中

    * cookie有name和value

     提供三个方法:getName 获取cookie的名称

                     getValue 获取cookie 的值

                     setValue 设置cookie 的值

  • cookie从持久性上分为两类:会话cookie和持久cookie

    会话cookie:保存在浏览器内存中,当会话结束浏览器关闭,会话cookie信息就是丢失;

    持久cookie:保存在浏览器临时文件缓存区中cookie(硬盘上)
    ,当关闭浏览器结束会话,持久cookie不会被删除

    * 持久cookie存在过期时间,过期后会自动删除

    * 持久cookie 需要设置cookie 有效期 setMaxAge

  • cookie访问有效路径

    携带cookie 必须path一致

    默认 生成cookie —-

    默认path 就是/day11/ (visit资源所在目录就是默认path)

    * 只有在访问 目录和子目录情况下
    才会携带cookie 信息

cookie 路径: 设置Cookie 路径  /day11/aa 

表示在此路径下的所有子目录下的 都可以获取该cookie信息

所以cc目录下的cc.jsp可以获取cookie信息 而 bb目录下的获取不到cookie
信息

![](http://www.cnblogs.com/cb0327/p/data:image/jpeg;base64,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)
  • 删除持久cookie
    删除持久cookie,可以将cookie最大时效设为0,注意,删除cookie时,path必须一致,否则不会删除

2、cookie不是很安全,别人可以分析存放在本地的cookie并进行cookie欺骗,考虑*到安全应当使用session 

 2.3、cookie案例之——记录上次访问时间案例

  CookieUtils.java——class【参考上面工具类:CookieUtils】

  VisitServlet.java——servlet

 1 import java.io.IOException;
 2 import java.util.Date;
 3 
 4 import javax.servlet.ServletException;
 5 import javax.servlet.http.Cookie;
 6 import javax.servlet.http.HttpServlet;
 7 import javax.servlet.http.HttpServletRequest;
 8 import javax.servlet.http.HttpServletResponse;
 9 
10 import cn.itcast.day11.utils.CookieUtils;
11 
12 public class VisitServlet extends HttpServlet {
13 
14     public void doGet(HttpServletRequest request, HttpServletResponse response)
15             throws ServletException, IOException {
16         doPost(request, response);
17 
18     }
19 
20     public void doPost(HttpServletRequest request, HttpServletResponse response)
21             throws ServletException, IOException {
22         //   开始coding................
23         response.setContentType("text/html;charset=utf-8");
24         // 1: 先获取 cookie
25         Cookie cookie = CookieUtils
26                 .getCookie("lastvisit", request.getCookies());
27         if (cookie == null) {
28             // 第一次访问
29             response.getWriter().print("你是第一次访问!");
30         } else {
31             // cookie 不为空 已经访问过...
32             String visitTime = cookie.getValue();
33 
34             response.getWriter().print(
35                     "您上次访问的时间:"
36                             +
37                     new Date(Long.parseLong(visitTime)).toLocaleString());
38 
39         }
40         long time = System.currentTimeMillis();//获取当前访问时间
41         cookie = new Cookie("lastvisit", time + "");//设置cookie的值
42         cookie.setMaxAge(3600 * 24 * 3);//设置cookie的有效时间
43         cookie.setPath("/");//设置cookie的有效路径
44         response.addCookie(cookie);//将cookie发送给客户端,保存在浏览器中
45 
46     }
47 
48 }

  *服务端向客户端写出一个新的cookie

  默认cookie都是浏览器内存中进行缓存的
,当浏览器关闭,会话结束,内存释放

3、session会在一定时间内保存在服务器上,当访问增多,会比较占用你服务器的性能,考虑到减轻服务器性能方面,应当使用cookie 

 2.4、cookie应用——显示商品浏览记录

  图片 7

  • 代码实现:Product.jsp

 1 <%@page import="cn.itcast.day11.utils.CookieUtils"%>
 2 <%@ page language="java" contentType="text/html; charset=UTF-8"
 3     pageEncoding="UTF-8"%>
 4 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 5 <html>
 6 <head>
 7 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 8 <title>Insert title here</title>
 9 </head>
10 <body>
11 
12   <h2>商品列表</h2>
13   <a href="/day11/look?id=1">mac 电脑</a>
14   <a href="/day11/look?id=2">小米手机3</a>
15   <a href="/day11/look?id=3">雕牌洗衣液2瓶装</a>
16   <a href="/day11/look?id=4">百事可乐一听</a>
17   <hr>
18   <h3>商品浏览记录</h3>
19   <%
20        //   java  code  .....
21         Cookie cookie =   CookieUtils.getCookie("ids", request.getCookies());
22         if(cookie==null){
23             out.print("你尚未浏览商品");
24             return;
25         }
26         String[] pros = {"mac 电脑","小米手机3","雕牌洗衣液2瓶装","百事可乐一听"};
27         String[] ids  = cookie.getValue().split(",");// 1 3 4
28         for(int i=0;i<ids.length;i++){
29               out.print(pros[Integer.parseInt(ids[i])-1]+"<br>");
30         }
31   %>
32 </body>
33 </html>
  • LookProductServlet.java

 1 import java.io.IOException;
 2 
 3 import javax.servlet.ServletException;
 4 import javax.servlet.http.Cookie;
 5 import javax.servlet.http.HttpServlet;
 6 import javax.servlet.http.HttpServletRequest;
 7 import javax.servlet.http.HttpServletResponse;
 8 
 9 import cn.itcast.day11.utils.CookieUtils;
10 
11 public class LookProductServlet extends HttpServlet {
12 
13     public void doGet(HttpServletRequest request, HttpServletResponse response)
14             throws ServletException, IOException {
15         doPost(request, response);
16 
17     }
18 
19     public void doPost(HttpServletRequest request, HttpServletResponse response)
20             throws ServletException, IOException {
21         //   开始coding................
22         response.setContentType("text/html;charset=utf-8");
23         /**
24          * servlet 存放用户浏览商品的id 到cookie 1,2 ,3
25          */
26         String id = request.getParameter("id");// 1
27         // 先判断 id
28         Cookie cookie = CookieUtils.getCookie("ids", request.getCookies());
29         if (cookie == null) {
30             // 第一查看
31             cookie = new Cookie("ids", id);
32             cookie.setMaxAge(3600 * 24 * 7);
33             cookie.setPath("/");
34         } else {
35             // 商品浏览 过 判断 id 在不在已知的ids 里面
36             String ids[] = cookie.getValue().split(",");// 1,2,3,4,5
37             if (!check(id, ids)) {
38                 // 不 存在 ...
39                 cookie.setValue(cookie.getValue() + "," + id);
40                 cookie.setMaxAge(3600 * 24 * 7);
41                 cookie.setPath("/");
42             }
43 
44         }
45         response.addCookie(cookie);
46         response.getWriter().print("查看成功<a href='/day11/product.jsp'>返回</a>");
47 
48     }
49 
50     private boolean check(String id, String[] ids) {
51         for (String eachId : ids) {
52             if (eachId.equals(id)) {
53                 return true;
54             }
55         }
56         return false;
57     }
58 
59 }

4、单个cookie保存的数*据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie 

3、session技术 

  Session :一种将用户信息保存在服务器端技术
,客户端会持有Session信息对应key,通过key找到session信息

  * Session 占用服务器空间,安全性更高
,Cookie节省服务器资源,安全性差一些

 

  Session
将用户相关信息保存服务器端,服务器会为每个浏览器创建单独Session对象,每个用户各自数据
保存各自浏览器对应Session对象中。不同用户获取到各自浏览器对应Session
保存数据。

  图片 8

  图片 9

  图片 10

  session依赖cookie机制 实现用户信息的保存.

  通过JSESSIONID  将sessionId()  发送给浏览器
使得浏览器可以保存session id信息

  获取用户的session 绑定数据.

  *注意:  默认级别,发送的cookie 机制是会话级别的 
浏览器关闭session对象存在,但是cookie 保存的sessionId 会消失.

5、建议将登录信息等重要信息存放为session,其他信息如果需要保留,可以放在cookie中 

 3.1、Session对象创建

  HttpSession 何时创建?  session对象可以在servlet 和jsp 中创建

  •  如果是在jsp  session对象会由容器自动创建
  •  servlet 容器不会自动创建 需要自己手动创建
    HttpSession session =  request,getSession();

  创建好session  容器会自动将seesionId通过cookie 机制 
发送给浏览器保存

   * Session 通过cookie 传输 jsessionid
用来在服务器端查找对应Session对象

6、session保存在服务器,客户端不知道其中的信心;cookie保存在客户端,服务器能够知道其中的信息 

 3.2、问题:如何实现关掉浏览器后,再开浏览器,上次购买的商品还在?

  如何实现关闭浏览器保留sessionid 信息 ?

  解决方案:修改服务器默认的cookie机制  变成持久化cookie

1 Cookie cookie = new Cookie("JSESSIONID", session.getId());// session对应的cookie信息
2 cookie.setPath("/");
3 cookie.setMaxAge(3600 * 24);//设置sessionId 的有效时间
4 response.addCookie(cookie);//发送给浏览器保存sessionid 信息
5 //浏览器获取的cookie持久化的cookie,下次打开浏览器就可以在服务器端找到sessio对象 (前提是session对象没有被销毁!)

7、session中保存的是对象,cookie中保存的是字符串 

 3.3、Session的生命周期及对象销毁

  • session对象创建

    *servlet 代码request.getSession() 执行时创建(当前会话第一次执行)

    *jsp  容器自动创建session 对象

  • session对象销毁

    1: 自然销毁,默认30分钟过期(连续不使用Session对象时间。即:session
    如果一直处于休息状态,容器主动销毁session)

      默认过期时间在tomcat/conf/web.xml 配置:

    1 <session-config>
    2         <session-timeout>30</session-timeout>
    3 </session-config>
    

      也可手动设置:

    1 setMaxInactiveInterval(int interval)
    

    2: 程序员主动销毁session 对象

    1 session.invalidate();//session 对象存放的数据就没有了
    

    3: 非正常关闭服务器(正常关闭服务器Session信息会被序列化到硬盘中
    保存tomcat/work目录)

  • 浏览器关闭,session对象是否就销毁了?
    答案:不是,Session保存在服务器端,和浏览器是否关闭没有关系 ,
    关闭浏览器时删除会话cookie,丢失jsessionid,没有jsession无法找到服务器端对应Session

8、session不能区分路径,同一个用户在访问一个网站期间,所有的session在任何一个地方都可以访问到,而cookie中如果设置了路径参数,那么同一个网站中不同路径下的cookie互相是访问不到的*

 3.4、问题:session.removeAttribute 和 session.invalidate区别 ?

  • 1 session.removeAttribute();// 删除当前Session对象中一个属性值
    2 session.invalidate();// 销毁当前Session对象,删除所有属性
    

三、web Storage和Cookie的区别 

4、session 案例——采用一次性验证码(用户登录)

  • 验证码分析图:

  图片 11

  • 代码示例:Register.jsp 

 1 <%@ page language="java" contentType="text/html; charset=utf-8"
 2     pageEncoding="utf-8"%>
 3 <html>
 4 <head>
 5 <meta charset="UTF-8">
 6 <title>Insert title here</title>
 7 <script type="text/javascript">
 8     function change() {
 9         document.getElementById('img').src = '/day11/check?'
10                 + new Date().getTime();
11     }
12 </script>
13 </head>
14 <body>
15     <h3>注册页面</h3>
16     <h3 style="color:red">${error }</h3>
17     <form action="/day11/register" method="post">
18         用户名<input type="text" name="name"><br>
19                 密码<input type="password" name="password"><br>
20                 验证码<input type="text" name="checkCode"><img src="/day11/check"
21     style="cursor: pointer;" onclick="change();" id="img"><br>
22         <input type="submit" value="注册">
23     </form>
24 </body>
25 </html>            
  • RegisterServlet.java

 1 import java.io.IOException;
 2 
 3 import javax.servlet.ServletException;
 4 import javax.servlet.http.HttpServlet;
 5 import javax.servlet.http.HttpServletRequest;
 6 import javax.servlet.http.HttpServletResponse;
 7 
 8 public class RegisterServlet extends HttpServlet {
 9 
10     public void doGet(HttpServletRequest request, HttpServletResponse response)
11             throws ServletException, IOException {
12         doPost(request, response);
13 
14     }
15 
16     public void doPost(HttpServletRequest request, HttpServletResponse response)
17             throws ServletException, IOException {
18         //   开始coding................
19         // 获取表单提交的信息
20         request.setCharacterEncoding("utf-8");
21         String name = request.getParameter("name");
22         String password = request.getParameter("password");
23         String inputCode = request.getParameter("checkCode");
24 
25         // 第一步 验证验证码信息是否正确
26         // 获取之前session 绑定验证码信息 比对
27         String codeSession = (String) request.getSession()
28                 .getAttribute("check");
29         // 一次验证码 用完就销毁...
30         request.getSession().removeAttribute("check");
31         // 比对 用户输入的code 和 session code 如果一致...
32         if (codeSession.equals(inputCode)) {
33             // 注册事情.....
34             response.sendRedirect("/day11/login.jsp");
35 
36         } else {
37             // 验证码错误 跳回来
38             request.setAttribute("error", "验证码错误");
39             request.getRequestDispatcher("/register.jsp").forward(request,
40                     response);
41         }
42 
43     }
44 
45 }

  *
一次性验证码,当验证码生成后,只使用一次,不管成功或者失败,验证码都将失效

  注意:一次验证码,用完就销毁!

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

5、session 案例——购物车

  • 购物车逻辑图

  图片 12

  • 代码示例:Product_cart.jsp

 1 <%@page import="cn.itcast.day11.utils.CookieUtils"%>
 2 <%@ page language="java" contentType="text/html; charset=UTF-8"
 3     pageEncoding="UTF-8"%>
 4 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 5 <html>
 6 <head>
 7 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 8 <title>Insert title here</title>
 9 </head>
10 <body>
11   <h2>商品列表</h2>
12   mac电脑<a href="/day11/cart?id=1">&nbsp;购买</a><br>
13  小米手机3 <a href="/day11/cart?id=2">购买</a><br>
14   雕牌洗衣液2瓶装<a href="/day11/cart?id=3">购买</a><br>
15  百事可乐一听 <a href="/day11/cart?id=4">购买</a><br>
16   
17   <hr>
18 <a href="/day11/cart.jsp">查看购物车</a>
19 </body>
20 </html>
  • CartServlet.java

 1 import java.io.IOException;
 2 import java.util.HashMap;
 3 import java.util.Map;
 4 
 5 import javax.servlet.ServletException;
 6 import javax.servlet.http.HttpServlet;
 7 import javax.servlet.http.HttpServletRequest;
 8 import javax.servlet.http.HttpServletResponse;
 9 
10 public class CartServlet extends HttpServlet {
11 
12     public void doGet(HttpServletRequest request, HttpServletResponse response)
13             throws ServletException, IOException {
14         doPost(request, response);
15 
16     }
17 
18     public void doPost(HttpServletRequest request, HttpServletResponse response)
19             throws ServletException, IOException {
20         //   开始coding................
21         response.setContentType("text/html;charset=utf-8");
22         String id = request.getParameter("id");// 3 2 3
23         // 通过id --->product
24         String pros[] = { "mac电脑", "小米手机3", "雕牌洗衣液2瓶装", "百事可乐一听" };
25         String pro = pros[Integer.parseInt(id) - 1];
26 
27         // 做一个 购物车
28         Map<String, Integer> cart = (Map<String, Integer>) request.getSession()
29                 .getAttribute("cart");
30         // 2: 判断购物车存在与否?
31         if (cart == null) {
32             // 购物车空
33             cart = new HashMap<String, Integer>();
34             cart.put(pro, 1);
35         } else {
36             // 已经存在购物车
37             if (cart.containsKey(pro)) {
38                 // 表示该购物车已经含有此商品
39                 int count = cart.get(pro);// 得到该购物车商品的数量
40                 // 数量+1
41                 cart.put(pro, count += 1);
42                 // 将已有的商品数量+1
43             } else {
44                 cart.put(pro, 1);
45             }
46 
47         }
48         request.getSession().setAttribute("cart", cart);
49         response.getWriter().print(
50                 "购买成功!<a href='/day11/product_cart.jsp'>返回主页</a>");
51     }
52 
53 }
  • cart.jsp

 1 <%@page import="java.util.*"%>
 2 <%@ page language="java" contentType="text/html; charset=UTF-8"
 3     pageEncoding="UTF-8"%>
 4 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 5 <html>
 6 <head>
 7 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 8 <title>Insert title here</title>
 9 </head>
10 <body>
11    <h3>购物车列表</h3>
12    <!--   如何从session  获取购物车信息   -->
13      <%
14         //  1session  获取数据 
15         Map<String,Integer>  cart  = (Map<String,Integer>)session.getAttribute("cart");
16        if(cart!=null){
17                //  2:  如何迭代数据?
18            Set<String>  set =  cart.keySet();
19            Iterator<String> it = set.iterator();
20             while(it.hasNext()){
21                 String  proName = it.next();
22                 int count  = cart.get(proName);
23                 out.print("商品名称:"+proName+"---数量"+count+"<br>");
24             }
25        }else{
26                out.print("购物车无商品");
27        }
28      %>
29 </body>
30 </html>

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

6、session、request、ServletContext对象的比较

  • ServletContext
    每个web工程对应唯一对象,全局的Servlet上下文对象,允许将数据保存      
    ServletContext — 所有Servlet共享
  • HttpServletRequest
    每次请求产生一个HttpServletRequest对象,允许将数据保存request对象中,结合请求转发一起使用
    * 当请求结束后,数据就会删除
  • HttpSession
    服务器会为每个客户端创建单独Session对象,允许将数据保存session中
    ,session保存的是每个用户各自的数据
    * 用户之间没有影响 (用户购物车、用户登录信息 )
  • 小结

    Servlet三种数据访问范围:ServletContext 、HttpSession、HttpServletRequest 
    1、保存ServletContext数据 ,在服务器关闭时才会删除,生命周期最长,全局都可以访问 (最少使用)
    * 应用场景:网站访问次数、全局数据库连接池 需要保存ServletContext
    2、保存HttpSession数据 ,三种情况下丢失 ,主要保存用户相关数据 
       (不建议存放大规模数据)
    * 应用场景: 用户登录信息、购物信息 保存HttpSession
    
    3、保存HttpServletRequest,当前请求发生时产生,响应结束数据立刻释放 
       (生命周期最短,最建议使用)
    *应用场景: Servlet获得数据处理结果,通过请求转发 传递信息给JSP显示 
    
    三种数据范围提供相同几个方法
    setAttribute
    getAttribute
    removeAttribute 
    

但是cookie也是不可或缺的,cookie的作用是与服务器进行交互,作为http规范的一部分而存在的,而web
Storage仅仅是为了在本地“存储”数据而生 

本章小结

  1、Cookie和Session区别 ?

  
  Cookie保存会话信息在客户端,Session保存会话信息在服务器端,Session基于Cookie实现的

  2、浏览器关闭后,是不是Session对象就销毁了 ?

     不是,Session保存在服务器端,关闭浏览器丢失jsessionid,

     无法找到服务器对应Session对象了,需要等到Session过期后才会销毁

  3、会话cookie和持久cookie区别 ?

   会话cookie
保存浏览器内存缓存区中,关闭浏览器后,会话cookie就会删除

   持久cookie 保存浏览器临时文件区
硬盘上,存在过期时间,当过期后会自动删除,通过设置maxage为0删除持久cookie

  4、session的三种销毁原因?

   服务器非正常关闭、session过期、invalidate

  5、如何实现关闭浏览器再次打开,Session仍然可以访问?

   将jsessionid 对应cookie 持久化

学习目标
会话及其会话技术: 1、会话 什么是会话?
用户打开浏览器,访问一个网站进行一系列操作,关闭浏览…

sessionStorage、localStorage、cookie都是在浏览器端存储的数据,其中sessionStorage的概念很特别,引入了一个“浏览器窗口”的概念,sessionStorage是在同源的同窗口中,始终存在的数据,也就是说只要这个浏览器窗口没有关闭,即使刷新页面或进入同源另一个页面,数据仍然存在,关闭窗口后,sessionStorage就会被销毁,同时“独立”打开的不同窗口,即使是同一页面,sessionStorage对象也是不同的

Web Storage带来的好处: 

1、减少网络流量:一旦数据保存在本地之后,就可以避免再向服务器请求数据,因此减少不必要的数据请求,减少数

据在浏览器和服务器间不必要的来回传递 

2、快速显示数据:性能好,从本地读数据比通过网络从服务器上获得数据快得多,本地数据可以及时获得,再加上网

页本身也可以有缓存,因此整个页面和数据都在本地的话,可以立即显示 

3、临时存储:很多时候数据只需要在用户浏览一组页面期间使用,关闭窗口后数据就可以丢弃了,这种情况使用sessionStorage非常方便

四、浏览器本地存储与服务器端存储的区别 

其实数据既可以在浏览器本地存储,也可以在服务器端存储 

浏览器可以保存一些数据,需要的时候直接从本地存取,sessionStorage、localStorage和cookie都是由浏览器存储在本地的数据 

服务器端也可以保存所有用户的所有数据,但需要的时候浏览器要向服务器请求数据。 

1、服务器端可以保存用户的持久数据,如数据库和云存储将用户的大量数据保存在服务器端 

2、服务器端也可以保存用户的临时会话数据,服务器端的session机制,如jsp的session对象,数据保存在服务器上,

实际上,服务器和浏览器之间仅需传递session id即可,服务器根据session
id找到对应用户的session对象,会话数据仅在一段时间内有效,这个时间就是server端设置的session有效期

服务器端保存所有的用户的数据,所以服务器端的开销较大,而浏览器端保存则把不同用户需要的数据分别保存在用户各自的浏览器中,浏览器端一般只用来存储小数据,而非服务可以存储大数据或小数据服务器存储数据安全一些,浏览器只适合存储一般数据

五、sessionStorage、localStorage和cookie的区别 

共同点:都是保存在浏览器端、且同源的 

区别: 

1、cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递,而sessionStorage和localStorage不会自动把数据发送给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下 

2、存储大小限制也不同,cookie数据不能超过4K,同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大 

3、数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭之前有效;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie:只在设置的cookie过期时间之前有效,即使窗口关闭或浏览器关闭 

4、作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localstorage在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的 

5、web Storage支持事件通知机制,可以将数据更新的通知发送给监听者 

6、web Storage的api接口使用更方便

六、sessionStorage与页面js数据对象的区别

页面中一般的js对象的生存期仅在当前页面有效,因此刷新页面或转到另一页面这样的重新加载页面的情况,数据就不存在了 

而sessionStorage只要同源的同窗口中,刷新页面或进入同源的不同页面,数据始终存在,也就是说只要浏览器不关闭,数据仍然存在

发表评论

电子邮件地址不会被公开。 必填项已用*标注