localstorage sessionstorage cookie 备忘

/*
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";	
	}
}

  

  

原文地址:https://www.cnblogs.com/leyi/p/5820046.html