标签：size script 描述 区别 new date() 过期 内容 bre
相同点：都可以存储在客户端
不同点：
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); }
--------------------------------------------------------------------------------------------------------------------------
前端面试01：描述一下cookices sessionStorage 和 localStorage 的区别
标签：size script 描述 区别 new date() 过期 内容 bre
原文地址：https://www.cnblogs.com/lyswwb/p/10932305.html
