cookie、localStorage 和 sessionStorage 的使用以及区别
localStorage 和 sessionStorage 的增删改查:
存储数据:
sessionStorage.setItem('key', 'sessionStorage的值'); // 存储数据
1获取指定键名数据:
let dataSession=sessionStorage.getItem('key');//获取指定键名数据
let dataSession2=sessionStorage.key;//sessionStorage是js对象,也可以使用key的方式来获取值
console.log(dataSession,dataSession2,'获取指定键名数据');
1
2
3获取sessionStorage全部数据:
let dataAll = sessionStorage.valueOf(); //获取全部数据
console.log(dataAll, '获取全部数据');
1
2清空sessionStorage数据:
sessionStorage.clear();//清空
1
localStorage
只要将sessionStorage
替换成localStorage
即可,他们两个的使用方法完全是一样的。
#cookie 的增删改茶:
保存 cookie 值:
let dataCookie = '110';
document.cookie = 'token' + '=' + dataCookie;
1
2获取指定名称的 cookie 值
let cookieData = getCookie('token');
function getCookie(name) {
// 获取指定名称的cookie值
let arr = document.cookie.match(
new RegExp('(^| )' + name + '=([^;]*)(;|$)')
); // 使用正则匹配 对应cookie,返回数组
if (arr != null) {
console.log(arr);
return unescape(arr[2]);
}
return null;
}
let cookieData = getCookie('token'); // cookie赋值给变量。
1
2
3
4
5
6
7
8
9
10
11
12
13保存 cookie 并且设置过期时间:
setTime('token','cookie的值',10);
function setTime(key,value,expiresDays) {
//存储 cookie 值并且设置 cookie 过期时间
let date=new Date();
date.setTime(date.getTime()+expiresDays*24*3600\*1000);
document.cookie=`${key}=${value}; expires=${date.toGMTString()}`;
console.log(document.cookie,'存储 cookie 值并且设置 cookie 过期时间');
}
1
2
3
4
5
6
7
8删除 cookie:
delCookie('token');
function delCookie(cookieName1) {
//删除cookie
let date2 = new Date();
date2.setTime(date2.getTime() - 10001); //把时间设置为过去的时间,会自动删除
document.cookie = cookieName1 + '=v; expires=' + date2.toGMTString();
console.log(document.cookie, '删除cookie');
}
1
2
3
4
5
6
7
8
#三者的异同:
这个问题其实很多大厂面试的时候也都会问到,所以可以注意一下这几个之间的区别:
生命周期:
cookie:可设置失效时间,没有设置的话,默认是关闭浏览器后失效
localStorage:除非被手动清除,否则将会永久保存。
sessionStorage: 仅在当前网页会话下有效,关闭页面或浏览器后就会被清除。
存放数据大小:
cookie:4KB左右
localStorage和sessionStorage:可以保存5MB的信息。
http请求:
cookie:每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题
localStorage和sessionStorage:仅在客户端(即浏览器)中保存,不参与和服务器的通信
易用性:
cookie:需要程序员自己封装,源生的Cookie接口不友好
localStorage和sessionStorage:源生接口可以接受,亦可再次封装来对Object和Array有更好的支持
#应用场景:
从安全性来说,因为每次http请求都会携带cookie信息,这样无形中浪费了带宽,所以cookie应该尽可能少的使用,另外cookie还需要指定作用域,不可以跨域调用,限制比较多。但是用来识别用户登录来说,cookie还是比stprage更好用的。其他情况下,可以使用storage,就用storage。
storage在存储数据的大小上面秒杀了cookie,现在基本上很少使用cookie了,因为更大总是更好的,哈哈哈你们懂得。
localStorage和sessionStorage唯一的差别一个是永久保存在浏览器里面,一个是关闭网页就清除了信息。localStorage可以用来夸页面传递参数,sessionStorage用来保存一些临时的数据,防止用户刷新页面之后丢失了一些参数。
#浏览器支持情况:
localStorage和sessionStorage是html5才应用的新特性,可能有些浏览器并不支持,这里要注意。
cookie的浏览器支持没有找到,可以通过下面这段代码来判断所使用的浏览器是否支持cookie:
if(navigator.cookieEnabled) {
alert("你的浏览器支持cookie功能");//提示浏览器支持cookie
} else {
alert("你的浏览器不支持cookie");//提示浏览器不支持cookie }
#数据存放处:
#番外:各浏览器Cookie大小、个数限制。
cookie 使用起来还是需要小心一点,有兴趣的可以看一下这个链接。
.
cookie、localStorage 和 sessionStorage 的使用以及区别的更多相关文章
- Cookie, LocalStorage 与 SessionStorage
Cookie, LocalStorage 与 SessionStorage相同点 都是储存在用户本地的数据. 意义在于避免数据在浏览器和服务器间不必要地来回传递. 三者的特点 同属于html5 ...
- 区分 Cookie, LocalStorage 与 SessionStorage
基本概念 Cookie Cookie 的大小限制为4KB左右,是网景公司的前雇员 Lou Montulli 在1993年3月的发明.它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码 ...
- cookie,localStorage和sessionStorage区别
三者的异同 特性 Cookie localStorage sessionStorage 数据的生命期 一般由服务器生成,可设置失效时间.如果在浏览器端生成Cookie,默认是关闭浏览器后失效 除非被清 ...
- 详说 Cookie, LocalStorage 与 SessionStorage
本文最初发布于我的个人博客:咀嚼之味 最近在找暑期实习,其中百度.网易游戏.阿里的面试都问到一些关于HTML5的东西,问题大多是这样开头的:“你用过什么HTML5的技术呀?” 而后,每次都能扯到 Co ...
- Cookie, LocalStorage 与 SessionStorage说明
一.Cookie Cookie 大小限制为4KB左右,不适合大量数据的存储.因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高.它的主要用途有保存登录信息,比如你 ...
- localStorage和sessionStorage的共同点和区别
共同点: 1.localStorage和sessionStorage都是用来存储客户端临时信息的对象. 2.他们均只能存储字符串类型的对象. 3.不同浏览器无法共享localStorage或sessi ...
- cookie,localStorage和sessionStorage的区别
cookie已经很久没有用过了,一直觉得session Storage和local Storage更加好用一些.
- cookie、session、localStorage、sessionStorage区别
cookie.session 会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份 ...
- 深入了解浏览器存储:对比Cookie、LocalStorage、sessionStorage与IndexedDB
摘要: 对比Cookie.LocalStorage.sessionStorage与IndexedDB 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 随着移动网络的发展与演化,我 ...
随机推荐
- Dijkstra(迪杰斯特拉求最短路径)-02-网络延迟时间
有 N 个网络节点,标记为 1 到 N. 给定一个列表 times,表示信号经过有向边的传递时间. times[i] = (u, v, w),其中 u 是源节点,v 是目标节点, w 是一个信号从源节 ...
- Startup/OWIN框架
为什么写OWIN框架呢? 因为没接触刀OWIN框架直接去学.NET Core比较生硬,个人见解.首先我们要知道OWIN的由来:ASP.NET和IIS和Windows操作系统的关系在之前是紧密联系的,缺 ...
- JavaWeb中的MVC 下
代码较多,请先略过代码,看懂逻辑在研究代码 引入 回顾上一节中的项目,最终的层次结构: 在MVC上中,我们分析了MVC设计模式具备的优点,以及不足,并在其基础上增了Service层用于处理业务逻辑,但 ...
- python笔记03
day03 一.今日内容: 1.整型 2.字符串 3.布尔类型 二.内容回顾和补充 脑图--xmind软件,processon 1.运算符补充(in.not in) value = "我是中 ...
- redis(7)--redis应用实战
问题1:哨兵模式下客户端应该连接哪个redis-server? 问题2:集群模式下为什么会有MOVED error Redis Java客户端介绍 已有的客户端支持 Redis Java客户端有很多的 ...
- JS-变量、作用域、垃圾回收机制总结
预解析时变量和函数同名的话,保留函数
- 【Visual Studio Code】插件
[Visual Studio Code]插件 转载:https://www.cnblogs.com/yangchongxing/p/10625628.html 目录 ================= ...
- Redis数据类型和操作
<"Java技术员"成长手册>,包含框架.存储.搜索.优化.分布式等必备知识,都收集在GitHub JavaEgg ,N线互联网开发必备技能兵器谱,欢迎指导 Redis ...
- Neety的基础使用及说明
BIO(缺乏弹性伸缩能力,并发量小,容易出现内存溢出,出现宕机 每一个客户端对应一个线程 伪异步IO:创建线程池,由线程池里边的线程负责连接处理,M个个请求进来时,会在线程池创建N个线程.容易出现线程 ...
- Java中的两种异常类型是什么?他们有什么区别?
一.Throwable是所有异常的根,java.lang.Throwable Error是错误,java.lang.Error Exception是异常,java.lang.Exception 二.E ...