浅谈session,cookie,sessionStorage,localStorage的区别及应用场景

558 阅读2分钟

1、概念区别:

localStorage是客户端存储数据的两个对象,不会自动把数据发给服务器,仅在本地保存,用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除

sessStorage是客户端存储数据的两个对象,不会自动把数据发给服务器,仅在本地保存,用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据

cookie是一般由服务器生成,也可以客户端生成,cookie在浏览器和服务器间来回传递

2、存储时间区别

localStorage除非被清除,否则可以永久存储

sessStorage仅在当前会话有效,关闭页面或者浏览器后会被清除

cookie服务器端可以设置失效时间,客户端默认关闭浏览器后失效

3、存储数据大小区别

localStorage的存储空间是5M

sessStorage的存储空间是5M

cookie只有4k左右,存储过多数据会带来性能问题

4、作用域区别

sessionStorage不在不同的浏览器窗口共享,即使是同一个页面

localStorage在所有同源窗口中都是共享的

cookie也是在所有同源窗口中都是共享的

5、使用的区别

localStorage和sessionStorage的使用

不管是 localStorage,还是 sessionStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):

  • 保存数据:localStorage.setItem(key,value);
  • 读取数据:localStorage.getItem(key);
  • 删除单个数据:localStorage.removeItem(key);
  • 删除所有数据:localStorage.clear();
  • 得到某个索引的key:localStorage.key(index);

提示: 键/值对通常以字符串存储,你可以按自己的需要转换该格式。

cookie的使用:

  • 添加cookie

获取客户端的Cookie时,只能获取name与value属性,其它属性都不会被提交。

Cookie c = new Cookie("username","peter");// 新建一个Cookie对象

c.setMaxAge(246060); // 设置过期时间1天,以秒为单位

response.addCookie(c); // 保存cookie到客户端

  • 删除cookie

删除某个Cookie时,只需要新建一个只有maxAge和value不一样的同名Cookie,然后添加到response中覆盖原来的Cookie

Cookie cookie = new Cookie("username","peter");// 新建Cookie

cookie.setMaxAge(0); // 设置生命周期为0,表示将要删除

response.addCookie(cookie); // 执行添加后就从response里删除了

  • 修改cookie

修改某个Cookie时,只需要新建一个只有value属性不一样的同名Cookie,然后添加到response中覆盖原来的Cookie

Cookie cookie = new Cookie("username","joker");// 新建Cookie

cookie.setMaxAge(246060); // 设置生命周期

response.addCookie(cookie); // 执行添加后就从response里覆盖修改了

注意:修改、删除Cookie时,新建的Cookie除value、maxAge之外的所有属性,例如name、path、domain等,都要与原Cookie完全一样。否则,浏览器将视为两个不同的Cookie而不会覆盖之前的Cookie,从而导致修改、删除失败。