localStorage 和 sessionStorage 的增删改查:

  1. 存储数据:

    sessionStorage.setItem('key', 'sessionStorage的值'); // 存储数据
    1
  2. 获取指定键名数据:

    let dataSession=sessionStorage.getItem('key');//获取指定键名数据
    let dataSession2=sessionStorage.key;//sessionStorage是js对象,也可以使用key的方式来获取值
    console.log(dataSession,dataSession2,'获取指定键名数据');
    1
    2
    3
  3. 获取sessionStorage全部数据:

    let dataAll = sessionStorage.valueOf(); //获取全部数据
    console.log(dataAll, '获取全部数据');
    1
    2
  4. 清空sessionStorage数据:

    sessionStorage.clear();//清空
    1

localStorage

只要将sessionStorage替换成localStorage即可,他们两个的使用方法完全是一样的。

#cookie 的增删改茶:

  1. 保存 cookie 值:

    let dataCookie = '110';
    document.cookie = 'token' + '=' + dataCookie;
    1
    2
  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
  3. 保存 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
  4. 删除 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 的使用以及区别的更多相关文章

  1. Cookie, LocalStorage 与 SessionStorage

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

  2. 区分 Cookie, LocalStorage 与 SessionStorage

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

  3. cookie,localStorage和sessionStorage区别

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

  4. 详说 Cookie, LocalStorage 与 SessionStorage

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

  5. Cookie, LocalStorage 与 SessionStorage说明

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

  6. localStorage和sessionStorage的共同点和区别

    共同点: 1.localStorage和sessionStorage都是用来存储客户端临时信息的对象. 2.他们均只能存储字符串类型的对象. 3.不同浏览器无法共享localStorage或sessi ...

  7. cookie,localStorage和sessionStorage的区别

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

  8. cookie、session、localStorage、sessionStorage区别

    cookie.session 会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份 ...

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

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

随机推荐

  1. Dijkstra(迪杰斯特拉求最短路径)-02-网络延迟时间

    有 N 个网络节点,标记为 1 到 N. 给定一个列表 times,表示信号经过有向边的传递时间. times[i] = (u, v, w),其中 u 是源节点,v 是目标节点, w 是一个信号从源节 ...

  2. Startup/OWIN框架

    为什么写OWIN框架呢? 因为没接触刀OWIN框架直接去学.NET Core比较生硬,个人见解.首先我们要知道OWIN的由来:ASP.NET和IIS和Windows操作系统的关系在之前是紧密联系的,缺 ...

  3. JavaWeb中的MVC 下

    代码较多,请先略过代码,看懂逻辑在研究代码 引入 回顾上一节中的项目,最终的层次结构: 在MVC上中,我们分析了MVC设计模式具备的优点,以及不足,并在其基础上增了Service层用于处理业务逻辑,但 ...

  4. python笔记03

    day03 一.今日内容: 1.整型 2.字符串 3.布尔类型 二.内容回顾和补充 脑图--xmind软件,processon 1.运算符补充(in.not in) value = "我是中 ...

  5. redis(7)--redis应用实战

    问题1:哨兵模式下客户端应该连接哪个redis-server? 问题2:集群模式下为什么会有MOVED error Redis Java客户端介绍 已有的客户端支持 Redis Java客户端有很多的 ...

  6. JS-变量、作用域、垃圾回收机制总结

    预解析时变量和函数同名的话,保留函数

  7. 【Visual Studio Code】插件

    [Visual Studio Code]插件 转载:https://www.cnblogs.com/yangchongxing/p/10625628.html 目录 ================= ...

  8. Redis数据类型和操作

    <"Java技术员"成长手册>,包含框架.存储.搜索.优化.分布式等必备知识,都收集在GitHub JavaEgg ,N线互联网开发必备技能兵器谱,欢迎指导 Redis ...

  9. Neety的基础使用及说明

    BIO(缺乏弹性伸缩能力,并发量小,容易出现内存溢出,出现宕机 每一个客户端对应一个线程 伪异步IO:创建线程池,由线程池里边的线程负责连接处理,M个个请求进来时,会在线程池创建N个线程.容易出现线程 ...

  10. Java中的两种异常类型是什么?他们有什么区别?

    一.Throwable是所有异常的根,java.lang.Throwable Error是错误,java.lang.Error Exception是异常,java.lang.Exception 二.E ...