1.首先简单总结下cookie
cookie:可以做会话跟踪
  特点:
     1、大小限制(不能超过4k)
     2、每个域下cookie不能超过50个
     3、有效期(和设定时间有关),过了有效期cookie会自动删除
     4、cookie读取(只能访问同一个域名下的cookie)(域的限制)
     5、没有设置存储时间的cookie是临时cookie,浏览器关闭自动删除
     6、cookie值只能是字符串
     7、cookie访问:子能访问父的cookie   但是父不能访问子的cookie;
 
1.1   cookie的存储
实例讲解: 
   基于cookie存储的注册功能:
    存储cookie:
reg.onclick = function(){
         //将用户名和密码以对象的形式存储
         var json = {
             "username" : uname.value,
             "password" : upwd.value
         }
         //开始存储cookie
         document.cookie =  "userinfo="+JSON.stringify(json) ;
         //跳转到登录页面
         location.href = "../b/login.html";
    }
 
    获取cookie:
//页面加载后 获取cookie数据
    window.onload = function(){
         //取出cookie数据
         var str =  document.cookie;//userinfo={"username":"admin","password":"111"}
         var _json =  JSON.parse(str.split("=")[1]);//'{"username":"admin","password":"111"}'
         log.onclick = function(){
             //如果用户输入的用户名和密码与cookie中的用户名和密码相等  提示登录成功
             if( uname.value == _json.username &&  upwd.value==_json.password ){
                 alert("登录成功");
             }else{
                 alert("用户名或密码错误");
             }
         }
    }
 
娥姐经典案例: 
    cookie用法之简易购物车 
存储数据:
var oUl = document.querySelector("ul");
    var _json = {};//存一个对象数据
    var arr = [];//存好多个对象
    var pid = 1;//商品编号
    //使用委托为每一个 加入购物车按钮 添加单击事件
    oUl.addEventListener("click",(e)=>{
         var e = e || event;
         var target = e.target || e.srcElement;
         if( target.className === "addMe" ){
             //将当前点击的商品数据存入到一个对象中
             _json = {
                 "pid" : pid++,
                 "pname" :  target.parentNode.parentNode.children[0].innerHTML,
                 "price" :  target.parentNode.parentNode.children[1].innerHTML
             }
             
             //将对象存入到数组中
             arr.push( _json );
             //将数组存入到cookie中
             document.cookie = "prolist=" +  JSON.stringify(arr);
         }
    })
取出:
window.onload = function(){
         //页面加载取出数据
         var str = document.cookie;
         //拆分字符串得到商品数据 数组
         var arr = JSON.parse(str.split("=")[1]);
         var sum = 0;//累加金额
         var str = "";
         //遍历数组中的数据 将数据显示到页面上
         for( var i = 0 ; i < arr.length ; i++ ){
             var pro = arr[i];
             sum += Number(pro.price);
             str +=  `<li><span>${pro.pid}</span><span>${pro.pname}</span><span>${pro.price}</span></li>`;
         }
         demo.innerHTML += str;
         
         //点击按钮  显示金额
         btn.onclick = function(){
             t.value = sum;
         }
    }
2.localstorage   本地存储
基本用法: 存取改删
//存数据(增加数据)
      btnSave.onclick = function(){
            //定义一个localStorage
            var storage = window.localStorage;
            //向storage中存储数据
            //方式一:
            storage.sname = "jack";
            //方式二:
            storage["age"] = 18;
            //方式三:
            storage.setItem( "tel" , "132xxx" );
      }
      //取数据
      btnGet.onclick = function(){
            //定义一个localStorage
            var storage = window.localStorage;
            //取出localStorage中的数据  根据键取值
            console.log( storage.sname , storage["age"] ,  storage.getItem("tel") );
      }
      
      //改数据
      btnUpt.onclick = function(){
            //定义一个localStorage
            var storage = window.localStorage;
            //向storage中存储数据
            //方式一:
            storage.sname = "lily";
            //方式二:
            storage["age"] = 18;
            //方式三:
            storage.setItem( "tel" , "156xxx" );
      }
      //删数据  :根据键删除
      btnDel.onclick = function(){
            //定义一个localStorage
            var storage = window.localStorage;
            //根据键删除某个数据
            //storage.removeItem("tel");
            //清空
            storage.clear();
      }

回顾js中的cookie/localstorage的更多相关文章

  1. 【原创】js中利用cookie实现记住密码功能

    在登录界面添加记住密码功能,我首先想到的是在java后台中调用cookie存放账号密码,大致如下: HttpServletRequest request HttpServletResponse res ...

  2. 在node.js中使用COOKIE

    node.js中如何向客户端发送COOKIE呢?有如下两个方案: 一.使用response.writeHead,代码示例: //设置过期时间为一分钟 var today = new Date(); v ...

  3. js中的cookie使用

    在网上找到的资料,收藏一下 function getCookies(name) { var arr = document.cookie.match(new RegExp("(^| )&quo ...

  4. js 中的cookie

    根据智能社31cookie基础与应用总结, cookie的特性: 1.同一个网站,共用一套cookie,实际上是根据域名来区分的. 如t.sina.com.cn ,和weibo.com这两个都是新浪微 ...

  5. 在jsp页面的js中使用Cookie的原理介绍以及相应方法的代码

    1. 设置cookie 1.1 每个cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie: document.cookie="user_Id=828&q ...

  6. js中对cookie的操作及json数据与cookie结合的用法

    cookie的使用 添加cookie 添加cookie:document.cookie = “key=value”; // 一次写入一个键值对 document.cookie = 'test1=hel ...

  7. js中的cookie

    cookie就是一个存放数据的东西,存储量很小4kb,存放在客户端上和应用设备上. 应用场景 用户注册,用户登录,购物车. Chrome浏览器在计算机中存放cookie的位置 C:\Users\Adm ...

  8. js中实现cookie的增删改查(document.cookie的使用详情)

    一.设置cookie的值 1.每个cookie都是一个名称/值对,名称/值对用等号连接,并将该名称/值对赋值给document.cookie即可.如:document.cookie="id= ...

  9. js中的cookie使用和vue-cookie的使用

    在HTTP协议的定义中,采用了一种机制来记录客户端和服务器端交互的信息,这种机制被称为cookie,cookie规范定义了服务器和客户端交互信息的格式.生存期.使用范围.安全性. 在JavaScrip ...

随机推荐

  1. UVA10375 选择与除法 Choose and divide 题解

    题目链接: https://www.luogu.org/problemnew/show/UVA10375 分析: 这道题可以用唯一分解定理来做. 什么是唯一分解定理?百度即可,这里也简介一下. 对于任 ...

  2. [剑指offer] 46. 孩子们的游戏(圆圈中最后剩下的数)

    题目描述 随机指定一个数m,让编号为0的小朋友开始报数.每次喊到m-1的那个小朋友要出列,并且不再回到圈中,从他的下一个小朋友开始,继续0...m-1报数....这样下去....直到剩下最后一个小朋友 ...

  3. MyBatis从入门到精通(十四):在MyBatis中使用类型处理器

    最近在读刘增辉老师所著的<MyBatis从入门到精通>一书,很有收获,于是将自己学习的过程以博客形式输出,如有错误,欢迎指正,如帮助到你,不胜荣幸! 本篇博客主要讲解在MyBatis中如何 ...

  4. 六、SQL 多张表数据叠加到一个视图里面

    1 create view vABC as select * from a,b,c where a.id = b.aid and b.id = c.bid ---------------------- ...

  5. <<Modern CMake>> 翻译 1. CMake 介绍

    <<Modern CMake>> 翻译 1. CMake 介绍 人们喜欢讨厌构建系统. 仅仅观看 CppCon17 上的演讲,就可以看到开发人员因为构建系统而闹笑话的例子. 这 ...

  6. 加深对C#数据类型的认识

    值类型: 值类型源于System.Value家族,每个值类型的对象都有一个独立的内存区域用于保存自己的值,值类型 所在的内存区域称之为栈(Stack),只要在代码中修改它,就会在内存区域保存这个值. ...

  7. .net持续集成sonarqube篇之 sonarqube与jenkins集成(命令模式)

    系列目录 Sonarqube结合Jenkins与常见问题 我们引入sonarqube组件的最终目的是要为整个Ci环境服务的,如果不能集成于当前的Jenkins CI,那么我们做的很多关于sonarqu ...

  8. python基础学习(起步)

    目录 python基础学习(起步) 变量 常量 变量的内存管理 python垃圾回收机制 变量的其他赋值方式 今日编程小题 本人能力有限,若有偏颇之处请读者大大不吝赐教! 祝大家每天都在成长! pyt ...

  9. java连接mysql数据库jdbc

    jdbc.driver = com.mysql.jdbc.Driverjdbc.url = jdbc:mysql://localhost:3306/数据库名jdbc.username = rootjd ...

  10. ORM详解

    讲解对象:ORM详解 作者:融水公子 rsgz 1 前言:开发流程正常只有简单的几步 0.1 配置数据库 0.2 定义模型 0.3 迁移文件 0.4 执行迁移生成数据表 0.5 使用模型类增删改查 2 ...