前端面试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); }

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