前端面试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; //密码

封装方法

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); }

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

巴特西

前端面试01：描述一下cookices sessionStorage 和 localStorage 的区别

最新文章

热门文章