zoukankan      html  css  js  c++  java
  • 前端面试01:描述一下cookices sessionStorage 和 localStorage 的区别

    相同点:都可以存储在客户端
    不同点:
    1、存储大小
    • cookie数据大小不能超过4K。
    • sessionStorage 和 localStorage 虽然也有大小限制,但是比cookie大得多,可以达到5M或更大。
    2、有效t时间
    • localStorage 存储持久数据,浏览器关闭后数据不会丢失除非主动删除数据;
    • sessionStorage 数据在当前浏览器窗口关闭后自动删除。
    • cookie 设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
    3、数据和服务器之间的交互方式
    • cookie的数据每次都会携带在HTTP头中会自动传递到服务器,服务器端也可以写cookie到客户端。
    • sessionStorage和localStorage不会自动把数据发送给服务器,仅在本地保存。
     
     
    cookie的操作
    设置cookie
    cookie格式
    cookie的内容:key=value;key=value……存储,参数名自定义
    cookie的过期时间:cookie.expires = 1000 毫秒
    cookie的路径:path(不兼容)
    var name = 'jem'; 
        var pwd = '123';
        var now = new Date(); 
        now.setTime(now.getTime() + 1*24*60*60*1000)); 
        var path = '/'; //不建议使用 
        document.cookie = 'name=' + name + ';expires=' + now.toUTCString() + ';path=' + path; document.cookie = 'pwd=' + name + ';expires=' + now.toUTCString() + ';path=' + path;
    

      读取cookie

    方法1
      
    function getKey(key) { 
        var data = document.cookie; 
        var findStr = key + '='; 
        var index = data.indexOf(findStr); 
        if(index == -1) retuen null; 
        var subStr = data.subString(index + findStr.length); 
        var lastIndex = subStr.indexof(';'); 
        if(lastIndex == -1){
             return subStr; 
        }else{
             return subStr.substring(0,lastIndex)
         } 
    }    
    

    方法2、

    function getKey(key) { 
        return JSON.parse( "{"" + document.cookie.replace(/;s+/gim,"","").replace(/=/gim,"":"")+""}" )[key]; }
    

      

    清除cookie
    var name = null;   var pwd = null;   var now = new Date();   var path = "/";//可以是具体的网页   document.cookie= "name=" + name + ";expires=" + now.toUTCString()+ ";path=" + path;//姓名   document.cookie = "pwd=" + pwd + ";expires=" + now.toUTCString()+ ";path=" + path; //密码  
    封装方法
    var cookie = { set:function(key, value,time) {//设置cookie方法 if(key) return '不能为空'; //设置key不存在的时 返回 var date = new Date(); var expiresDays = time && 1;//默认1天后过期 date.setTime(date.getTime() + expiresDays * 24 * 60 * 60 *1000 );//格式化cookies的时间 document.cookie = key + '=' + value + ';=expires=' + date.toUTCString(); }, get:function(key) { return JSON.parse("{""+document.cookie.replace(/;s+/gmi,"","").replace(/=/gim,"":"")+""}")[key]; }, check:function(key) { var cookieVal = this.get(); if(cookieVal == null||cookieVal == undefinded){ alert('值已存在!') }else{ alert('可以设置值') } }, delete:function(key) { var date = new Date(); date.setTime(date.getTime()-10000);//设置一个过去的时间 document.cookie = key + '=' + value + ';=expires=' + date.toUTCString(); } }
     
    sessionStorage 的使用
    seddionStorage.setItem(key,value);//必须是字符串 
    var value = sessionStorage.getItem(key);//或者sessionStorage 值
    sessionStorage.removeItem(key);//删除sessionStorage 的值
    seddionStorage.clear();//清空sessionStorage

      localStorage 的使用

    同sessionStorage
    localStorage和sessionStorage的key和length属性实现遍历
    sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历,例如下面的代码:
    var storage = window.localStorage; for(var i=0, len=storage.length; i<len;i++){ var key = storage.key(i); var value = storage.getItem(key); console.log(key + "=" + value); }

    -------------------------------------------------------------------------------------------------------------------------- 

  • 相关阅读:
    Struts2SpringHibernate整合示例,一个HelloWorld版的在线书店(项目源码+详尽注释+单元测试)
    Java实现蓝桥杯勇者斗恶龙
    Java实现 LeetCode 226 翻转二叉树
    Java实现 LeetCode 226 翻转二叉树
    Java实现 LeetCode 226 翻转二叉树
    Java实现 LeetCode 225 用队列实现栈
    Java实现 LeetCode 225 用队列实现栈
    Java实现 LeetCode 225 用队列实现栈
    Java实现 LeetCode 224 基本计算器
    Java实现 LeetCode 224 基本计算器
  • 原文地址:https://www.cnblogs.com/lyswwb/p/10932305.html
Copyright © 2011-2022 走看看