浏览器的存储cookie，localStorage，sessionStorage.js

//------------------------------------js的存储很常见----------------------------------------//
//cookie的测试需要在本地测试（！！！！！！！！！！！）
//js的存储 cookie   localStorage，sessionStorage
//localStorage  是持久化的本地保存，除非主动删除，不然会一直存在，而且在所有的同源窗口中都是可以共享的；

//sessionStorage是会话级别的本地保存，比如一个页面关闭的时候该页面设置的sessionStorage数据会自动消失，
               //在不同浏览器窗口不会共享的，即使是同一个浏览器的同一个页面。
//storage只能存储字符串的数据，对于JS中常用的数组或对象却不能直接存储。
//所以需要通过JSON.stringify(gamerule)将需要设置的内容序列化成json字符串
//读取的时候可以将读取到的内容通过 JSON.parse(str)转化成对象
//两者使用方发相同
window.localStorage.setItem(key,value);//设置指定key的数据（JSON格式）
window.localStorage.getItem(key);//获取指定key的数据
window.localStorage.removeItem(key);//删除指定key的数据
window.localStorage.clear();//清空所有的存储数据

//sessionStorage测试
var KEY='todo';
var Store={
    save:function(items){
        return window.sessionStorage.setItem(KEY,JSON.stringify(items));
    },
    fetch:function(){
        return JSON.parse(window.sessionStorage.getItem(KEY)||'[]');
    }
}
var s={'name':'王鸿基'};
Store.save(s);
var x=Store.fetch();
console.log(x);//输出：Object {name: "王鸿基"}


//cookie 和session 的区别：
//1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
//2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗考虑到安全应当使用session。
//3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用COOKIE。
//4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
//5、所以个人建议：
   //将登陆信息等重要信息存放为SESSION
   //其他信息如果需要保留，可以放在COOKIE中
//cookie的js用法
//例子说明：当访问者首次访问网站时，他们会被要求填写姓名。名字会存储于 cookie 中。当访问者再次访问网站时，他们就会收到欢迎词。









//设置cookie过期时间，项目中常用次来设置七天免登陆的方法
function delCookie(name) { 
    var exp = new Date(); 
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name); 
    if(cval!=null) document.cookie= name + "="+cval+";
    expires="+exp.toGMTString(); 
    } 
    //使用示例setCookie("name","hayden"); alert(getCookie("name")); 
    //如果需要设定自定义过期时间 
    //那么把上面的setCookie　函数换成下面两个函数就ok; 
    //程序代码
     function setCookie(name,value,time) { 
        var strsec = getsec(time);
        var exp = new Date(); 
        exp.setTime(exp.getTime() + strsec*1);
        document.cookie = name + "="+ escape (value) + ";
        expires=" + exp.toGMTString();
      } 
      function getsec(str) {
         alert(str); 
         var str1=str.substring(1,str.length)*1; 
         var str2=str.substring(0,1);
          if (str2=="s") {
             return str1*1000;
            } else if (str2=="h") { 
              return str1*60*60*1000; 
            } else if (str2=="d") { 
              return str1*24*60*60*1000; 
            } 
          }
   //这是有设定过期时间的使用示例： 
   //s20是代表20秒 
   //h是指小时，如12小时则是：h12 
   //d是天数，30天则：
   d30 setCookie("name","hayden","s20");

   Response.Cookies(“user_name”).Expires=Date+1 ‘指定cookie保存时间

保留COOKIES一个小时
Response.Cookies(“MyCookie”).Expires= (now()+1/24) 
Response.Cookies(“MyCookie”).Expires = DateAdd(“h”, 1, Now())

设置60个月以后过期
Response.Cookies(“CookieName”).Expires=DateAdd(“m”,60,now())

设置7秒以后过期
Response.Cookies(“User”).expires=second()+7
在expires后面定义的时间可以用时间函数代替
例如：date()+7就表示在今天的时间上加上7天，而second()+7则是7秒了。 
Response.Cookies(“字段名”).expires=时间函数+N， 
例如： Response.Cookies(“name2”).expires=date+1，表示Cookies保存1天， 
再比如： Response.Cookies(“name2”).expires=Hour+8，表示Cookies保存8小时。 

封装cookie相关函数
//cookie相关函数  
// ------------  
var CookieCars = {  
	setCookie: function(name, value) {  
		expiryday = new Date();  
		expiryday.setTime(expiryday.getTime() + 30 * 30 * 24 * 60 * 60 * 1 * 1000);  
		document.cookie = name + "=" + escape(value) + "; expires=" + expiryday.toGMTString();  
	},  

	getCookie: function(name) {  
		var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));  

		if (arr != null) {  
			return unescape(arr[2]);  
		}  
		return null;  
	},  

	clearCookie: function(name) {  
	var exp = new Date();   
		exp.setTime(exp.getTime() - 1);   
		var cval = CookieCars.getCookie(name);   
		if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();   
	}  
}; 

用法：

设置cookie --> CookieCars.setCookie('key',val)
获取cookie --> CookieCars.getCookie('key')
清除cookie --> CookieCars.clearCookie('key')


 

总结：
什么时候实用cookie,localStorage,或者sessionStorage本人习惯，
如果存储的数据不需要有过期时间即为页面开启与关闭就使用sessionStorage,
如果需要设置过期时间，比如2天过期就使用cookie(数据量要小)
如果不需要设置过期时间，两个页面或者几个页面共同使用数据，就使用localStorage
（使用完数据后请及时清空数据，不清空的话会不安全）
清空可以配合页面加载完毕（注意只清空自己设的数据即可，不要清空与页面无关的数据）
	window.onload=function(){
		 window.localStorage.removeItem(key);//删除指定key的数据
		};页面加载完毕