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. python金融应用(二)基本数据类型和结构

    一.基本数据类型 1.整形 a=10 type(a) Out[75]: int a.bit_length() #字节长度Out[76]: 4 整形相除会返回整形,想要返回浮点数,需要用浮点数相除1./ ...

  2. 从零开始的openGL——四、纹理贴图与n次B样条曲线

    前言 在上篇文章中,介绍了如何加载绘制模型以及鼠标交互的实现,并且遗留了个问题,就是没有模型表面没有纹理,看起来很丑.这篇文章将介绍如何贴纹理,以及曲线的绘制. 纹理贴图 纹理加载 既然是贴图,那首先 ...

  3. OPPO R11刷机初体验

    刷机目的 最初打算是用旧手机搭一个服务器,首先想到的是刷一个Linux系统,但这太难了,我搞不定,然后就想着可以用一些软件比如KSWEB之类的来代替,但是想要访问80端口的话还是需要root,但是普通 ...

  4. 一遍文章搞清楚VO、DTO、DO、PO的概念、区别

    作者:Cat Qi 概念: VO(View Object):视图对象,用于展示层,它的作用是把某个指定页面(或组件)的所有数据封装起来. DTO(Data Transfer Object):数据传输对 ...

  5. python学习-pandas

    import pandas as pd # DataForm 二维数据# print(pd.read_excel("datas.xlsx")) # 多行数据 - 加载表单s = p ...

  6. vue.config.js的常用配置

    const path = require('path') const glob = require('glob') const resolve = (dir) => path.join(__di ...

  7. 解决在IE11浏览器下,JQuery的AJAX方法不响应问题

    在项目的时候一直都是在使用谷歌浏览器在调试,后来在现场部署到服务器上的时候,客户使用的是IE浏览器,版本是11 在测试的过程中,出现几个问题,虽然是几个问题,但是问题的原因就是AJAX第一次响应,第二 ...

  8. Sunset: Nightfall Vulnhub Walkthrough

    靶机链接: https://www.vulnhub.com/entry/sunset-nightfall,355/ 主机扫描: ╰─ nmap -p- -A 10.10.202.162Starting ...

  9. Android 数据库 SQLiteOpenHelper

    public class DbOpenHelper extends SQLiteOpenHelper { private static String name = "test.db" ...

  10. Springboot 错误处理机制

    SpringBoot默认的错误处理机制 即我们常见的白色的ErrorPage页面 浏览器发送的请求头: 如果是其他的请求方式,比如客户端,则相应一个json数据: 原理:是通过 ErrorMvcAut ...