一、cookie

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="utf-8">
  5.          <title></title>
  6.      </head>
  7.      <body>
  8.          <input type="text" name="username" id="username" value="">
  9.          <input type="password" name="password" id="password" value="">
  10.          <button type="button" name="button" id="btn">删除cookie</button>
  11.          <script type="text/javascript">
  12.              // 1、设置、获取
  13.              var d = new Date();
  14.              d.setHours(d.getHours() + 1);//1小时后过期
  15.              // path=/ 此时的/代表的是网站中所有的目录都可以访问这个cookie
  16.              document.cookie='username=zhangsan;expires='+d.toUTCString()+";path=/";//设置cookie
  17.              document.cookie;//获取所有的cookie
  18.              console.log(document.cookie)
  19.  
  20.              // 2.设置、获取、删除cookie
  21.              // setCookie('password','123456',0.5*3600*1000)//30分钟后失效
  22.              // setCookie('username','zhangsan',0.5*3600*1000)//30分钟后失效
  23.              var btnObj = document.getElementById('btn')
  24.              btnObj.onclick = function(){
  25.                  delCookie('username');
  26.                  delCookie('password');
  27.              }
  28.              function setCookie(name,value,expires){
  29.                  //计算有效期
  30.                  var d = new Date();
  31.                  //设置有效期
  32.                  d.setTime(d.getTime()+expires);
  33.                  //设置cookie
  34.                  document.cookie = name +'='+value+';expires='+d.toUTCString();
  35.              }
  36.              function getCookie(name) {
  37.                  //获取cookie
  38.                  var cookieStr = document.cookie;
  39.                  //根据；拆分
  40.                  var cookieArr = cookieStr.split(';');
  41.                  //获取对应的cookie值
  42.                  name += '=';//获取的cookie值都是后面有=
  43.                  var result = '';
  44.                  for(var i=0;i<cookieArr.length;i++) {
  45.                      //没一个cookie值得前面都有一个空格，将空格删除，再去查找对应的name值
  46.                      var tmp = cookieArr[i].trim();
  47.                      if(tmp.indexOf(name) == 0) {
  48.                          //如果查找成功，则直接返回
  49.                          result = tmp.slice(name.length);
  50.                          break;
  51.                      }
  52.                  }
  53.                  //返回结果
  54.                  return result;
  55.              }
  56.              function delCookie(name) {
  57.                  var d = new Date();
  58.                  d.setTime(d.getTime()-1000);
  59.                  document.cookie = name+'=;expires='+d.toUTCString();
  60.              }
  61.          </script>
  62.      </body>
  63.  </html>

二、sessionStorage

【

　html5新增的会话存储对象；

生命周期：关闭窗口或标签页之后将会删除这些数据

　存储上限限制：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。
】

使用方法：

  1.  string sessionStorage.getItem(string key) ：返回键名(key)对应的值(value)。若没有返回null。
  2.  
  3.  void sessionStorage.setItem(string key, string value) ：该方法接受一个键名(key)和值(value)作为参数，将键值对添加到存储中；如果键名存在，则更新其对应的值。
  4.  
  5.  void sessionStorage.removeItem(string key) ：将指定的键名(key)从 sessionStorage 对象中移除。
  6.  
  7.  void sessionStorage.clear() ：清除 sessionStorage 对象所有的项。
  8.  
  9.  sessionStorage.setItem('username','admin') //存储数据
  10.  sessionStorage.getItem('username')//获取
  11.  sessionStorage.clear();//清楚所有
  12.  sessionStorage.removeItem('username')//清楚指定
  13.  
  14.  也可以存储JSON对象【JSON.stringify(obj)和JSON.parse(stry)】
  15.  eg:
  16.  var obg = {
  17.  　　name:'tom',
  18.  　　age:22
  19.  };
  20.  //存储值：将对象转换为Json字符串
  21.  sessionStorage.setItem('user',JSON.stringify(obj));
  22.  //取值时：把获取到的Json字符串转换回对象
  23.  var userJsonStr = sessionStorage.getItem('user');
  24.  userObj = JSON.parse(userJsonStr);
  25.  console.log(userObj.name);//tom

js中cookie、sessionStorage、localStorage的更多相关文章

  1. js中cookie，localStorage(sessionStorage)的存取

    一.cookie (原生的不好用,自己简单封装) 1. 存cookie的方法: function setCookie(c_name,value,expiredays) { var exdate=new ...

  2. JS中Cookie、localStorage、sessionStorage三者的区别

    cookie:大小4k,一般由服务器生成,可设置失效时间,关闭浏览器后失效,与服务器通信时:每次都会携带HTTP头中,如果使用cookie保存过多数据会带来性能问题 localhostStorage: ...

  3. session,cookie,sessionStorage,localStorage的区别及应用场景

    session,cookie,sessionStorage,localStorage的区别及应用场景 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟 ...

  4. 缓存session,cookie,sessionStorage,localStorage的区别

    https://www.cnblogs.com/cencenyue/p/7604651.html(copy) 浅谈session,cookie,sessionStorage,localStorage的 ...

  5. 彻底弄清楚session,cookie,sessionStorage,localStorage的区别及应用场景（面试向）

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_94 客户端状态保持是一个老生常谈的问题了,归根结底追踪浏览器的用户身份及其相关数据无非就是以下四种方式:session,cooki ...

  6. session,cookie,sessionStorage,localStorage的相关设置以及获取删除

    一.cookie 什么是 Cookie? "cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScrip ...

  7. js中cookie的使用

    js中并没有封装好的存储cookie,取得cookie和删除cookie的函数,所以必须得自己手动处理,并且cookie中也只能存储字符串,不能存储数组等复杂的数据类型. // 添加cookie fu ...

  8. js中cookie操作

    js中操作Cookie的几种常用方法 * cookie中存在域的概念,使用path和domain区分: * 在同一域中的set和del可以操作同一名称的cookie,但不在同一域中的情况下,则set无 ...

  9. js 中cookie 使用

    一个系统有多种 角色, 每一种角色不同权限.后台请求的数据根据权限展示 ,所以要把权限保存在浏览器中. 首先 引入 在页面 <script type="text/javascript& ...

  10. jquery.cookie.js中$.cookie() 使用方法

    定义:让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术: 下载与引入:jquery.cookie.js基于jquery:先引入jquery,再引入:jquery.coo ...

随机推荐

  1. destoon手机端mobileurl函数增加城市分类参数

    mobileurl函数在include/global.func.php 858行 共四个参数,moduleid-模型id,catid-分类id,itemid -文章id,page-页码 functio ...

  2. PHP数组函数 array_multisort() ----对多个数组或多维数组进行排序

    PHP中array_multisort可以用来一次对多个数组进行排序,或者根据某一维或多维对多维数组进行排序. 关联(string)键名保持不变,但数字键名会被重新索引. 输入数组被当成一个表的列并以 ...

  3. CRC点滴

    研究了一个晚上,大致看懂了crc校验的方法.这里记录一下,因为can总线中需要用到crc校验的. 举例说明CRC校验码的求法:(此例子摘自百度百科:CRC校验码) 信息字段代码为: 1011001:对 ...

  4. poj 3190 奶牛挤奶问题 贪心算法

    题意:奶牛挤奶问题,每只奶牛在[a,b]的时间内挤奶,要求挤奶的过程中不能不打扰,且只能自己一个人独享挤奶的机器.问最少需要多少个挤奶的机器? 思路: 对奶牛挤奶开始的时间从小到大开始排序. 将正在工 ...

  5. Java策略模式(Strategy)

    一.定义 定义一组算法,将每个算法都封装起来,并且使它们之间可以互换.策略模式使这些算法在客户端调用它们的时候能够互不影响地变化.(Java的TreeSet集合中,构造方法可传入具体的比较器对象以实现 ...

  6. PAT Basic 1074

    1074 宇宙无敌加法器 地球人习惯使用十进制数,并且默认一个数字的每一位都是十进制的.而在 PAT 星人开挂的世界里,每个数字的每一位都是不同进制的,这种神奇的数字称为“PAT数”.每个 PAT 星 ...

  7. Java技术——多态的实现原理

    ．方法表与方法调用 如有类定义 Person, Girl, Boy class Person { public String toString(){ return "I'm a person ...

  8. 聊聊、Java Keytool P12 转 JKS

    最近公司合作机构需要更改服务证书,总共给了 3 个文件过来.openapi-cert.p12.openapi-cert.key.openapi-cert.crt. openapi-cert.crt - ...

  9. Balanced Lineup（ST）

    描述 For the daily milking, Farmer John's N cows (1 ≤ N ≤ 50,000) always line up in the same order. On ...

  10. ASP.NET配置设置-关于web.config各节点的讲解

    在msdn中搜索:“ASP.NET配置设置”,可以查看各个节点的配置. httpRuntime 元素:配置 ASP.NET HTTP 运行时设置,以确定如何处理对 ASP.NET 应用程序的请求.