当前位置: 首页 > Web前端 > HTML5

彻底了解cookie、session、localStorage、sessionStorage以及如何使用它们

时间:2023-04-06 00:04:00 HTML5

1、Cookie1.1,Cookie的由来。Cookies是Netscape前员工于1993年发明的一种跟踪网络会话状态的技术。一个会话(对于客户端来说,一个会话可以理解为打开浏览器进入某个网站到关闭浏览器退出某个网站。)由一组请求和响应组成,是围绕一个相关事物的请求和响应。回复。因此,这些请求和响应之间必须存在数据传输,即需要进行会话状态跟踪。但是HTTP协议是无状态协议,不同请求之间不能进行数据传输。这时候就需要一种能够在请求之间传递数据的会话跟踪技术,cookies就是这样一种技术。1.2.cookies的使用。Cookie是由服务器生成并存储在客户端的信息载体。用户提交第一个请求后,服务端生成cookie,封装在响应头中,以响应的形式发送给客户端。客户端收到响应后,将cookie保存在客户端。当客户端再次发送相同类型的请求时,该请求会携带客户端保存的cookie数据发送给服务器,服务器会跟踪会话。下面是一个登录页面,点击提交,调用后端接口doLogin,后端生成cookie,并将cookie添加到响应头中。后续访问索引页面时,浏览器会自动携带cookie信息发送给服务器。前端登录页面javadoLogincodeprotectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{//接收客户端提交给服务端的userName和passWordStringuserName=request.getParameter("userName");StringpassWord=request.getParameter("passWord");//创建两个cookie来存储userName和passWordCookiecookie1=newCookie("userName",userName);Cookiecookie2=newCookie("passWord",passWord);//指定Cookie绑定路径cookie1.setPath("/");cookie2.setPath("/");//将Cookie添加到响应头中response.addCookie(cookie1);响应.addCookie(cookie2);PrintWriter输出=响应。getWriter();out.write("");关闭();}点击提交后,在doLogin接口的响应头中,我们可以看到浏览器中写入了cookie信息,如下再次访问该资源时对于路径下的其他资源,会在请求中携带Cookie信息header并发送给服务器,服务器可以获取到Cookie来处理相应的业务。例如访问索引页1.3,即存放cookie的位置。Cookie分为持久性Cookie和会话级Cookie。当为cookie设置过期时间后,cookie信息将被存储在计算机硬盘上,称为持久cookie。当cookie没有设置过期时间时,cookie信息保存在浏览器内存中,当浏览器关闭时,cookie失效,称为会话级cookie。我们上面演示的cookie是会话级的cookie,它保存在浏览器的内存中。当关闭浏览器,再次打开浏览器访问index页面时,请求头中不会携带cookie信息。不同的浏览器存储cookies的方式不同,因此存储位置也会不同。例如,当你用Chrome浏览器打开一个网页时,后台会生成一个持久化的cookie,并将cookie信息写入到响应头中。cookie信息保存在电脑硬盘上。这时,当你用IE浏览器打开同一个网页时,请求头中是不会携带cookie信息的,因为Chrome浏览器和IE浏览器存储cookie的方式不同,所以两个浏览器不能共享一个cookie。对于session-levelcookies,Chrome浏览器可以跨进程,IE浏览器不能跨进程。1.4、js操作Cookie下面是js添加、获取、删除Cookie的方法。/*设置Cookiename为Cookie的名称,value为Cookie的值,day为Cookie的过期时间,单位为天*/functionsetCookie(name,value,day){if(day!==0){//当设置的时间等于0时,不设置expires属性,浏览器关闭后cookie失效。var过期=天*24*60*60*1000;vardate=newDate(+newDate()+expires);document.cookie=name+"="+escape(value)+";expires="+date.toUTCString();}else{document.cookie=name+"="+escape(value);}}/*获取Cookie名称为Cookie名称*/functiongetCookie(name){if(document.cookie.length!=0){varcookieStart=document.cookie.indexOf(name+"=");如果(cookieStart!=-1){cookieStart=cookieStart+name.length+1;varcookieEnd=document.cookie.indexOf(";",cookieStart);返回cookieEnd!=-1?文档.cookie.slice(cookieStart,cookieEnd):document.cookie.slice(cookieStart);}else{返回“”;}}else{返回“”;}}/*删除cookie名称为cookie名称*/functiondelCookie(name){//由于cookie不能直接删除,只需要将有效时间设置为当前时间之前的时间,cookie就会变成无效的setCookie(名称,“”,-1);}2、session2.1、session介绍。Session是Web开发中的一种会话跟踪技术。上面提到的cookie也是一种会话跟踪技术。不同的是cookie保存的是client端的session状态,而session保存的是server端的session状态。2.2、会话的使用。还是用上面的登录页面,点击提交的时候,调用后端接口CreateSession,在java程序中创建一个session,保存客户端发送过来的数据。javaCreateSessioncodeprotectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{//接收客户端发送的数据StringuserName=request.getParameter("userName");字符串密码=request.getParameter("密码");//创建一个session对象,如果getSession()函数中没有传参,有session对象就使用旧的session,没有session对象就创建一个新的session对象HttpSessionsession=request.getSession();//给session字段写属性session.setAttribute("userName",userName);session.setAttribute("密码",passWord);PrintWriterout=response.getWriter();out.write("成功");关闭();}在java程序UsageSession中使用session。protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{//当getSession()函数参数为false时,表示如果有session对象,则使用旧的session对象,如果没有session对象,不会创建新的session对象HttpSessionsession=request.getSession(false);如果(会话!=null){字符串用户名=(字符串)会话.getAttribute(“用户名”);字符串密码=(字符串)session.getAttribute("密码");System.out.println(用户名);System.out.println(密码);}}那么问题来了。cookie存储在客户端,用于识别客户信息,session存储在服务器端,用于识别客户状态。不同的客户用自己的电脑访问同一个服务器,如果客户端没有保存cookie信息,那么请求头中就不会携带cookie信息,这样可以区分不同的用户,但是不同用户访问上面的时候UsageSession服务,服务端怎么获取到正确的userName,而你获取不到其他用户的userName呢?让我们解释一下会话是如何工作的。2.3、session的工作原理。A。服务器以Map的形式管理当前应用中的session,这个Map称为session列表。Map的key是一个长度为32的随机字符串,这个随机字符串叫做JSessionID,value是对session对象的引用。当用户第一次提交请求时,服务端会执行request.getSession()方法,自动生成一个Map.Entry对象。key是根据一定算法新生成的JSessionID,value是新创建的session。b.将session信息写入session列表后,系统会自动以JSESSIONID为name,32位随机字符串为value,以Cookie的形式存储在响应头中,并将Cookie与对客户的回应。C。客户端收到cookie后会自动存入浏览器缓存中(cookie没有有效期限,是会话级cookie)。当用户再次提交请求时,cookie会被携带在请求头中,并一起发送给服务器端。d.服务器调用request.getSession(false)时,系统会自动检测请求中是否有JSESSIONID。如果存在,就会使用这个32位的随机字符串在服务器Map列表中找到对应的session,并处理对应的业务。3、localStorage3.1和localStorage介绍。localStorage是HTML5的一个新特性。该特性主要用于本地存储,解决了cookie存储空间不足的问题(Cookie中每个cookie的存储空间为4k),localStorage存储的内存大小约为5M。localStorage是本地永久存储,数据保存在本地硬盘,关闭浏览器数据不会被清除。在同一个浏览器的不同标签页中,localStorage是共享的,但是不同浏览器存储的localStorage是不同的。Shared,也就是说Chrome浏览器存储的localStorage不能在IE中使用。3.2.localStorage的用法localStorage只能用于存储字符串。localStorage.setItem("姓名","lisi");//存储名称=“lisi”。localStorage.getItem("名称");//获取名称的值。localStorage.removeItem("名称");//删除名称。当localStorage要存储一个对象时,需要将对象转成json字符串进行存储。varuser={"姓名":"lisi";"age":"24"};localStorage.setItem("user",JSON.stringify(user));//JSON.stringify(user)是将user对象转为json字符串。varuser=JSON.parse(localStorage.getItem("user"))//将获取的json字符串转换为对象。4、sessionStorage4.1和sessionStorage介绍。和localStorage一样,sessionStorage也是HTML5的新特性,也是用来在本地存储数据的。不同的是,localStorage是本地永久存储。sessionStorage中存储的数据只能在同一个会话中访问,浏览器关闭时数据会被删除。清除。sessionStorage中存储的数据不能跨进程,即在同一个浏览器的不同标签页中,sessionStorage是不共享的。sessionStorage数据保存在浏览器内存中,所以关闭浏览器数据会被清除。4.2、sessionStorage的使用。和localStorage的用法类似,sessionStorage只能存储字符串。sessionStorage.setItem("姓名","lisi");//存储名称=“lisi”。sessionStorage.getItem("名称");//获取名称的值。sessionStorage.removeItem("名称");//删除名称。当sessionStorage要存储对象时。varuser={"姓名":"lisi";"age":"24"};sessionStorage.setItem("user",JSON.stringify(user));//JSON.stringify(user)是将user对象转为json字符串。varuser=JSON.parse(sessionStorage.getItem("user"))//将获取的json字符串转换为对象。