回顾js中的cookie/localstorage

Posted wangwenxin123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了回顾js中的cookie/localstorage相关的知识,希望对你有一定的参考价值。

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的主要内容,如果未能解决你的问题,请参考以下文章

JS 详解 Cookie LocalStorage 与 SessionStorage

cookie/ localStorage /sessionStorage区别

iOS wkwebview怎么写localStorage

cookie,localStorage,sessionStorage

Cookie, LocalStorage 与 SessionStorage

在赛普拉斯的测试中保留 cookie / localStorage 会话