您的位置:首页 > 其它

localstorage sessionstorage cookie 备忘

2016-08-29 22:55 302 查看
/*
sessionStorage:
保存的数据用于浏览器的一次会话,当会话结束(通常是该窗口关闭),数据被清空;

localStorage:
保存的数据长期存在,下一次访问该网站的时候,网页可以直接读取以前保存的数据。

Cookie:
Cookie的内容会随着请求一并发送的服务器,容量小。

本地存储的有点:
减少网络流量,一旦数据保存在本地后,就可以避免再向服务器请求数据,因此减少了不必要的数据请求,
减少数据在浏览器和服务器间不必要地来回传递。从本地读数据比通过网络从服务器获得数据快得多。
存储空间更大。
*/

//本地存储操作方法:
var sStorage=window.sessionStorage
var lStorage=window.localStorage
sStorage.setItem('name','zzn');//设置值
lStorage.setItem('sex','male');//设置值
console.info(sStorage.getItem('name'))//获取值
console.info(lStorage.getItem('sex'));//获取值
sStorage.removeItem('name','zzn');//清除某个键名对应的数据
lStorage.clear();//清除某个键名对应的数据
sStorage.clear();//clear方法用于清除所有保存的数据

//遍历操作:
sStorage.setItem('name','zzn');
sStorage.setItem('height',175);
for(var i=0;i<sStorage.length;i++){
console.info(sStorage.key(i))//遍历获取键
console.info(sStorage.getItem(sStorage.key(i)))//遍历获取值
}

//Cookie基础用法
document.cookie='username=leyi';
/*以上代码中'username'表示 cookie 名称,'leyi'表示这个名称对应的值。假设 cookie 名称并不存在,那么就是创建一个新的 cookie;
如果存在就是修改了这个 cookie 名称对应的值。如果要多次创建 cookie ,重复使用这个方法即可。*/

//cookie的读取操作
document.cookie='username=leyi';
function getCookie(cookie_name){
if(document.cookie.length>0){ //判断是否有cookie,没有就返回空
cookie_name_start=document.cookie.indexOf(cookie_name);//因为name在最前面,如果有cookie则返回0
if(cookie_name_start!=-1){
first_equal_sign_index=cookie_name_start+cookie_name.length+1;//查找name值后的"="号的索引位置
cookie_end=document.cookie.indexOf(';',first_equal_sign_index)//查找第一个分号的的索引位置
if(cookie_end==-1){
cookie_end=document.cookie.length;//如果cookie没有设置分号,比如document.cookie='name=value',那就直接获取整个字符串长度
return unescape(document.cookie.substring(first_equal_sign_index,cookie_end))//截取第一个"="号到第一个";"号的字符串,即name对应的value值
}
}
}
return "";
}
console.info(getCookie("username"));

//设置cookie的有效期
document.cookie = "name=value;expires=date";

//设置cookie
function setCookie(cookie_name, cookie_value, expiredays){
 var date=new Date();
 date.setDate(date.getDate() + expiredays);
 document.cookie=cookie_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+date.toGMTString());
}
setCookie('num',123456,30);

//路径设置
//只有与创建 cookie 的页面在同一个目录或子目录下的网页才可以访问
document.cookie = "name=value;expires=date;path=/";

//域设置
document.cookie = "name=value;path=path;domain=xx.com";

//安全设置
//把cookie设置为secure,只保证 cookie 与服务器之间的数据传输过程加密,而保存在本地的 cookie文件并不加密。
//重要信息最后不放在cookie
document.cookie = "username=leyi;secure";


公司封装的:

/**
* cookie 操作,设置,取出,删除
*
* @namespace Rose
* @class string
*/
Rose.cookie = {
/**
* 设置一个cookie
* @method set
* @param {String} name cookie名称
* @param {String} value cookie值
* @param {String} path 所在路径
* @param {Number} expires 存活时间,单位:小时
* @param {String} domain 所在域名
* @return {Boolean} 是否成功
*/
set : function(name, value, expires, path, domain) {
var str = name + "=" + encodeURIComponent(value);
if (expires != null || expires != '') {
if (expires == 0) {expires = 100*365*24*60;}
var exp = new Date();
exp.setTime(exp.getTime() + expires*60*1000);
str += "; expires=" + exp.toGMTString();
}
if (path) {str += "; path=" + path;}
if (domain) {str += "; domain=" + domain;}
document.cookie = str;
},
/**
* 获取指定名称的cookie值
* @method get
* @param {String} name cookie名称
* @return {String} 获取到的cookie值
*/
get : function(name) {
var v = document.cookie.match('(?:^|;)\\s*' + name + '=([^;]*)');
return v ? decodeURIComponent(v[1]) : null;
},
/**
* 删除指定cookie,复写为过期
* @method remove
* @param {String} name cookie名称
* @param {String} path 所在路径
* @param {String} domain 所在域
*/
remove : function(name, path, domain) {
document.cookie = name + "=" +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}


  

  
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: