浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同


Posted in HTML / CSS onJune 04, 2020

一、通常我们在存储数据的方式有三种

cookie sessionstorage localstorage ,那么这三种数据的存储又有什么关系呢?让我们一起来看看吧

cookie:保存cookie值:

var dataCookie='110';
    document.cookie = 'token' + "=" +dataCookie;

获取指定名称的cookie值

function getCookie(name) 
{ //获取指定名称的cookie值
// (^| )name=([^;]*)(;|$),match[0]为与整个正则表达式匹配的字符串,match[i]为正则表达式捕获数组相匹配的数组;
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr != null) {
  console.log(arr);
  return unescape(arr[2]);
}
return null;
}
 var cookieData=getCookie('token'); //cookie赋值给变量。

设置cookie过期时间

function setTime() 
{

//存储cookie值并且设置cookie过期时间

var date\=new Date();

var expiresDays\=10;//设置十天过期

date.setTime(date.getTime()+expiresDays\*24\*3600\*1000);

document.cookie\="userId=828; 
expires="+date.toGMTString();

console.log(document.cookie,'存储cookie值并且设置cookie过期时间');

}

setTime();

删除cookie

function delCookie(cookieName1) {

//删除cookie

var date2\=new Date();

date2.setTime(date2.getTime()\-10001);//把时间设置为过去的时间,会自动删除

document.cookie\= cookieName1+"=v; expires="+date2.toGMTString();

console.log(document.cookie,'删除cookie');

}
delCookie('userId');

localStorage和sessionStorage:localStorage和sessionStorage所使用的方法是一样的,下面以sessionStorage为栗子:

var name='sessionData';
var num=120;
sessionStorage.setItem(name,num);//存储数据
sessionStorage.setItem('value2',119);
let dataAll=sessionStorage.valueOf();//获取全部数据
console.log(dataAll,'获取全部数据');
var dataSession=sessionStorage.getItem(name);//获取指定键名数据
var dataSession2=sessionStorage.sessionData;//sessionStorage是js对象,也可以使用key的方式来获取值
 console.log(dataSession,dataSession2,'获取指定键名数据');
 sessionStorage.removeItem(name); //删除指定键名数据
 console.log(dataAll,'获取全部数据1');
 sessionStorage.clear();//清空缓存数据:localStorage.clear();
 console.log(dataAll,'获取全部数据2');

三者的异同:

上面的使用方式说好了,下面就唠唠三者之间的区别,这个问题其实很多大厂面试的时候也都会问到,所以可以注意一下这几个之间的区别。

生命周期:

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、localStorage、sessionStorage数据存放处

番外:各浏览器Cookie大小、个数限制。

总结

到此这篇关于数据存储的三种方式 cookie sessionstorage localstorage 异同的文章就介绍到这了,更多相关数据存储 cookie sessionstorage localstorage 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
纯CSS3实现3D旋转书本效果
Mar 21 HTML / CSS
css3新增颜色表示方式分享
Apr 15 HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
Feb 04 HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
Jul 16 HTML / CSS
一些常用的HTML5模式(pattern) 总结
Jul 14 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
Oct 26 HTML / CSS
html5唤起app的方法
Nov 30 HTML / CSS
详解Html5 监听拦截Android返回键方法
Apr 18 HTML / CSS
HTML5中使用json对象的实例代码
Sep 10 HTML / CSS
CSS的class与id常用的命名规则
May 18 HTML / CSS
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
Dec 06 HTML / CSS
CSS中calc(100%-100px)不加空格不生效
May 07 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
Jun 03 #HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
Jun 03 #HTML / CSS
使用Html5 Stream开发实时监控系统
Jun 02 #HTML / CSS
Html5 canvas画图白板踩坑
Jun 01 #HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
May 28 #HTML / CSS
HTML5实现直播间评论滚动效果的代码
May 27 #HTML / CSS
html5拖拽应用记录及注意点
May 27 #HTML / CSS
You might like
php中try catch捕获异常实例详解
2014/11/21 PHP
ThinkPHP模板标签eq if 中区分0,null,false的方法
2017/03/24 PHP
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
2016/05/20 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
[03:01]2014DOTA2国际邀请赛 小组赛7月13日TOPPLAY
2014/07/14 DOTA
用pandas按列合并两个文件的实例
2018/04/12 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
查看python下OpenCV版本的方法
2018/08/03 Python
django如何实现视图重定向
2019/07/24 Python
新版Pycharm中Matplotlib不会弹出独立的显示窗口的问题
2020/06/02 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
Ego Shoes官网:英国时髦鞋类品牌
2020/10/19 全球购物
甜点店创业计划书
2014/01/27 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
外贸专业求职信
2014/03/09 职场文书
运动会入场口号
2014/06/07 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
2014年政工师工作总结
2014/12/18 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
售后服务质量承诺书
2015/04/29 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书
2015年防灾减灾工作总结
2015/07/24 职场文书
环保建议书作文400字
2015/09/14 职场文书
详解Python为什么不用设计模式
2021/06/24 Python