localStorage、sessionStorage 和 Cookie 区别、用法、和应用场景等(一张表格解决)

localStorage保存在客户端，不与服务器进行交互通信,存储字符串类型，对于复杂的对象可以使用JSON.stringify和JSON.parse来处理，永久的，关闭页面或浏览器之后localStorage中的数据也不会消失，一般5MB以内，cookie只能保存字符串类型，以文本的方式，格式为document.cookie = name='value; expires=UTC";

GMLGDJ

3504人浏览 · 2022-03-22 14:49:11

GMLGDJ · 2022-03-22 14:49:11 发布

localStorage、sessionStorage 和 cookie全面对比

	localStorage	sessionStorage	Cookie
储存位置	保存在客户端，不与服务器进行交互通信（硬盘中）	保存在客户端，不与服务器进行交互通信（内存中）	浏览器端
储存内容	存储字符串类型,对于复杂的对象可以使用JSON.stringify和JSON.parse来处理	与localStorage相同	cookie只能保存字符串类型，以文本的方式，格式为 document.cookie = name='value; expires=UTC"; path=/'path 参数，属于的路径,默认为当前页面
生命周期	永久的，关闭页面或浏览器之后localStorage中的数据也不会消失	及在当前会话下有效,在关闭了浏览器窗口后就会被销毁	如果不在浏览器中设置过期事件，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称为会话cookie。如果在浏览器中设置了cookie的过期事件，cookie会被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期事件结束才消失。cookie是服务端发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都带上它
安全性	存在本地，相对安全	存在本地，相对安全	存在服务端，可能会被攻击
储存容量	一般5MB以内	与localStorage相同	单个cookie不能超过4KB
获取方式	window.localStorage	window.sessionStorage	window.document.cookie
数据类型	'object'	与localStorage相同	'string'
添加修改值	localStorage.setItem (key, value) 保存数据，以键值对的方式储存信息。	与localStorage相同	往下看
获取某项值	localStorage.getItem (key) 获取数据，将键值传入，即可获取到对应的value值。key (index) —— 获取某个索引的key	与localStorage相同	往下看
删除	删除指定键：localStorage.removeItem('key')清空全部项：localStorage.clear()	与localStorage相同	往下看
缺点	（1）浏览器的大小不统一，并且在 IE8 以上的 IE 版本才支持 localStorage 这个属性。（2）目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换。（3）localStorage在浏览器的隐私模式下面是不可读取的。（4）localStorage不能被爬虫抓取到。	（1）session保存的东西越多，就越占用服务器内存，对于用户在线人数较多的网站，服务器的内存压力会比较大（2）依赖于cookie（sessionid保存在cookie），如果禁用cookie，则要使用URL重写（3）创建session变量有很大的随意性，可随时调用，不需要开发者做精确地处理，所以过度的使用session变量将会导致代码不可读而且不好维护。	（1）大小受限（2）用户可以操作（禁用）cookie，使功能受限（3）安全性较低（4）有些状态不可能保存在客户端（5）每次访问都要传送cookie给服务器，浪费宽带（6）cookie数据有路径（path）的概念，可以限制cookie只属于某个路径下。
应用场景	（1）长期登录（+判断用户是否已登录）（2）历史搜索记录（3）用户习惯	（1）网上商城中的购物车（2）保存用户登录信息（3）将某些数据放入session中，供同一用户的不同页面使用（4）敏感账号一次性登录	（1）判断用户是否登陆过网站，以便下次登录时能够实现自动登录（或者记住密码）。（2）保存上次登录的时间等信息。（3）保存上次查看的页面（4）浏览计数

Cookie修改添加删除

js中并没有cookie修改添加删除等方法你可以通过document.cookie='xxx'进行修改但必须要保持document.cookie = name='value; expires=UTC"; path=/'path这种格式

//设置cookie
function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  var expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}
//获取cookie
function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') c = c.substring(1);
    if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
  }
  return "";
}
//清除cookie  
function clearCookie(name) {
  setCookie(name, "", -1);
}

Cookie的属性值

属性名	说明	默认值	作用域
Expires	到期时间：UTC	-	-
Max-Age	到期时间：秒优先级高于Expires	-	-
domain	所属域名	当前域名	默认当前域名，指定值后是当前域名和子域名
path	生效的路径	当前网址	当前路径及其子路径
HttpOnly	无法通过 JavaScript 脚本拿到	-	-
Secure	只有在加密协议 HTTPS 下生效	-	-

注意点

localStorage

localStorage只在同源浏览器下储存，例如在谷歌中储存的在ie、火狐,360等浏览器中是不能读取的

sessionStorage

在当前页面创建的sessionStorage，在当前页面不关闭的情况下，在同一个浏览器中打开当前页面sessionStorage也为空

Cookie

Cookie并不提供修改、删除操作。如果要修改某个Cookie，只需要新建一个同名的Cookie，添加到response中覆盖原来的Cookie。如果要删除某个Cookie，只需要新建一个同名的Cookie，并将maxAge设置为0，并添加到response中覆盖原来的Cookie。注意是0而不是负数。负数代表其他的意义。读者可以通过上例的程序进行验证，设置不同的属性。
修改、删除Cookie时，新建的Cookie除value、 maxAge之外的所有属性，例如name、 path、 domain等，都要与原Cookie完全一样。否则，浏览器将视为两个不同的Cookie不予覆盖，导致修改、删除失败。
cookie的名或值中不能使用分号（;）、逗号（,）、等号（=）以及空格
Cookie具有不可跨域名性