一、Cookie

  Cookie 是小甜饼的意思。cookie 非常小,它的大小限制为4KB左右。它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。

  cookie以文本的方式存于客户端,由于http协议是无状态的,只要客户端与服务端数据交换完,就会断掉链接,如果再请求就再次链接,而服务器是无法保存这种链接的状态,只有不停地链接、断链接,所以需要cookie来做一个身份认证,再次请求的时候服务器会根据这个身份id进行用户判断。

    但要注意cookie是不可跨域的,他会根据域名来区分向哪个服务器发送数据。

    其次,cookie不能存一些敏感信息, 因为通过浏览器获取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赋值给变量。

二、localStorage

  localStorage 是 HTML5 标准中新加入的技术,它并不是什么划时代的新东西。早在 IE 6 时代,就有一个叫 userData 的东西用于本地存储,而当时考虑到浏览器兼容性,更通用的方案是使用 Flash。而如今,localStorage 被大多数浏览器所支持。

三、sessionStorage

  sessionStorage 与 localStorage 的接口类似,但保存数据的生命周期与 localStorage不同。sessionStorage它只是可以将一部分数据在当前会话中保存下来,刷新页面数据依旧存在。但当页面关闭后,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');

四、三者的异同

五、应用场景

  因为每次http请求都会携带cookie信息,这样无形中浪费了带宽,所以cookie应该尽可能少的使用,另外cookie还需要指定作用域,不可以跨域调用,限制比较多。
  但是用来识别用户登录来说,cookie还是比storage更好用的。其他情况下,可以使用storage,就用storage。

  而另一方面 localStorage 接替了 Cookie 管理购物车的工作,同时也能胜任其他一些工作。比如HTML5游戏通常会产生一些本地数据,localStorage 也是非常适用的。如果遇到一些内容特别多的表单,为了优化用户体验,我们可能要把表单页面拆分成多个子页面,然后按步骤引导用户填写,这时候 sessionStorage 的作用就发挥出来了。

cookie,localStorage和sessionStorage的更多相关文章

  1. Cookie, LocalStorage 与 SessionStorage

    Cookie, LocalStorage 与 SessionStorage相同点 都是储存在用户本地的数据. 意义在于避免数据在浏览器和服务器间不必要地来回传递. 三者的特点     同属于html5 ...

  2. 区分 Cookie, LocalStorage 与 SessionStorage

    基本概念 Cookie Cookie 的大小限制为4KB左右,是网景公司的前雇员 Lou Montulli 在1993年3月的发明.它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码 ...

  3. 详说 Cookie, LocalStorage 与 SessionStorage

    本文最初发布于我的个人博客:咀嚼之味 最近在找暑期实习,其中百度.网易游戏.阿里的面试都问到一些关于HTML5的东西,问题大多是这样开头的:“你用过什么HTML5的技术呀?” 而后,每次都能扯到 Co ...

  4. cookie,localStorage和sessionStorage区别

    三者的异同 特性 Cookie localStorage sessionStorage 数据的生命期 一般由服务器生成,可设置失效时间.如果在浏览器端生成Cookie,默认是关闭浏览器后失效 除非被清 ...

  5. Cookie, LocalStorage 与 SessionStorage说明

     一.Cookie    Cookie 大小限制为4KB左右,不适合大量数据的存储.因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高.它的主要用途有保存登录信息,比如你 ...

  6. cookie,localStorage和sessionStorage的区别

    cookie已经很久没有用过了,一直觉得session Storage和local Storage更加好用一些.

  7. 深入了解浏览器存储:对比Cookie、LocalStorage、sessionStorage与IndexedDB

    摘要: 对比Cookie.LocalStorage.sessionStorage与IndexedDB 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 随着移动网络的发展与演化,我 ...

  8. 简单说下cookie,LocalStorage与SessionStorage.md

    最近在网上看到有人讨论这三个的一些概念与区别,发现自己也一直没有较好的总结,所以查阅了一些资料来阐述一下. 基本概念 cookie cookie英文意思是小甜饼,是原来的网景公司创造,目前是在客户端存 ...

  9. cookie, localStorage, sessionStorage区别

    cookie 有过期时间,默认是关闭浏览器后失效,4K,兼容ie6,不可跨域,子域名会继承父域名的cookielocalStorage 永不过期,除非手动删除,5M,兼容IE8,不可跨域,子域名不能继 ...

  10. cookie、localStorage、sessionStorage之间的区别

    sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...

随机推荐

  1. (49)LINUX应用编程和网络编程之四 Linux进程全解

    补充: 1.  C程序的执行过程: C编译器调用链接器,链接器设置可执行程序文件的启动起始地址(启动例程),启动例程获得内核传递来的 命令行参数和环境变量值,为调用main函数做准备.[实际上该启动例 ...

  2. Oracle-SQL程序优化4

    从事一年DBA工作,经验尚浅,但是遇到问题总还是能够解决,今天就谈下我遇到的一个比较奇葩的问题. 运维人员告知我下午过后ETL一直卡住没有继续,那时我以为又是什么兼容性问题引起的,就重跑一下ETL,谁 ...

  3. 如何下载如腾讯课堂等PC网页视频的方法

    其实网上的教程有很多,实际也没那么复杂. 一.用插件法 方法是用插件,大多数主流的浏览器都是支持插件的,只要下载个插件应用市场的视频插件就可以搞定了. 当然,每个浏览器的视频插件品牌都是不一样的.这里 ...

  4. 解析JSON有俩种方式:JSONObject和GSON

    JSONObject: //JSONObject解析JSON文件 private void parseJSONWithJSONObject(String json_data) { try { JSON ...

  5. SQL Server阻塞blocking案例分析

    今天在性能测试过程中发现大量阻塞报警,检查whoisactive(https://github.com/amachanic/sp_whoisactive/)数据发现,阻塞blocking头部sessi ...

  6. final finalize finally throw throws try catch

    什么是finalize()方法 finalize()方法什么时候被调用 参见网址 析构函数(finalization)的目的是什么 final 和 finalize 的区别 final以下参见网址 f ...

  7. hook C++

    Intercepting Calls to COM Interfaces(hook com接口) 通过COM组件IFileOperation越权复制文件 代码注入之远程线程篇 使用VC++通过远程进程 ...

  8. oracle中awr性能报告阅读笔记

    1.对于数据库运行的业务不太了解,那么awr性能报告中最需要关注的是Top 5 Timed Foreground Events和Time Model Statistics两个部分

  9. springboot打war包部署tomcat服务器,以及表单提交数据乱码处理

    小白觉得springboot打成jar包直接使用内嵌的tomcat或jetty容器(java -jar xxx.jar)运行项目不利于定位问题,我还是习惯于查看tomcat或nginx的日志来定位问题 ...

  10. HTTP学习记录:四、头信息(请求和响应)

    学习资源主要为:@小坦克HTTP相关博客 一.请求头信息(Request Header) 请求头信息包含比较多,如下: 1.Cache头域 if-modified-Since 作用:把浏览器端缓存页面 ...