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

  

  

localstorage sessionstorage cookie 备忘的更多相关文章

  1. localStorage sessionStorage cookie indexedDB

    目录: localStorage sessionStorage cookie indexedDB localStorage localStorage存储的数据能在跨浏览器会话保留 数据可以长期保留,关 ...

  2. 客户端 localStorage, sessionStorage, cookie 的区别

    SessionStorage, LocalStorage, Cookie这三者都可以被用来在浏览器端存储数据,而且都是字符串类型的键值对! 区别在于前两者属于WebStorage,创建它们的目的便是存 ...

  3. localstorage sessionstorage cookie的区别

    一.基本概念 Cookie cookie比较小,大小限制在4kb左右,是网景公司的前雇员 LouMontulli 在1993年3月的发明.它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记 ...

  4. 本地存储 localStorage/sessionStorage/cookie

    cookie是个基础的东西.是服务器发送到客户端,存储在客户端的一小段数据.可以存储一些配置信息,客户标识信息等.用户下次访问这个网站时,会把上次网站发来的cookie一同发送回去.cookie保存在 ...

  5. localStorage,sessionStorage,cookie使用场景和区别

    localStorage:HTML5新增的在浏览器端存储数据的方法.设置和获取localStorage的方法: 设置: localStorage.name = 'zjj'; 获取: localStor ...

  6. localStorage&sessionStorage&Cookie

    localStorage.sessionStorage.Cookie三者区别如下:

  7. localStorage,sessionStorage,cookie区别

    localStorage:HTML5新增的在浏览器端存储数据的方法.设置和获取localStorage的方法: 设置: localStorage.name = 'zjj'; 获取: localStor ...

  8. sessionStorage 和 localStorage 、cookie

    sessionStorage 和 localStorage html5中web storage包括两种储存方式:sessionStorage 和 localStorage sessionStorage ...

  9. sessionStorage 、localStorage 与cookie 的异同点

    cookie 容量4kb,默认各种浏览器都支持,缺陷就是每次请求,浏览器都会把本机存的cookies发送到服务器,无形中浪费带宽.userdata,只有ie支持,单个容量64kb,每个域名最多可存10 ...

随机推荐

  1. mysql 5.7.11 yum 安装步骤

    直接上步骤 首先你得有一台能够上外网的linux服务器 1:rpm -Uvh http://dev.mysql.com/get/mysql-community-release-el6-5.noarch ...

  2. 在Eclipse中使用JUnit4进行单元测试(高级篇)

    通过前2篇文章,您一定对JUnit有了一个基本的了解,下面我们来探讨一下JUnit4中一些高级特性. 一.高级Fixture 上一篇文章中我们介绍了两个Fixture标注,分别是@Before和@Af ...

  3. 记录Tomcat7.x热部署配置过程

    我自己的开发版本是tomcat7.0.43+myeclipse14 原版在:http://blog.csdn.NET/chen_zw/article/details/8867779 热部署是指在你对项 ...

  4. OC中copy的使用

    @property内存管理策略的选择 1.非ARC 1> copy : 只用于NSString\block: 2> retain : 除NSString\block以外的OC对象: 3&g ...

  5. R&S学习笔记(二)

    1.OSPF:路由条目1万多条.收敛时间1s:ISIS:路由条目可以达2万多条,收敛时间50ms().ISIS在链路层上面,不依赖IP这层,这样给了它很多可能.比如IPv4, IPv6路由的混合承载, ...

  6. C#获取网页内容的三种方式

    C#通常有三种方法获取网页内容,使用WebClient.WebBrowser或者HttpWebRequest/HttpWebResponse... 方法一:使用WebClient (引用自:http: ...

  7. openlayers3 画扇形

    参考了http://www.cnblogs.com/lingxue3769/archive/2011/11/01/2231409.html同学的博客 和 百度知道https://zhidao.baid ...

  8. Geodatabase数据模型

    1  Geodatabase概念 Geodatabase是ArcInfo8引入的一种全新的面向对象的空间数据模型,是建立在DBMS之上的统一的.智能的空间数据模型.“统一”是指,Geodatabase ...

  9. Android自动化学习笔记之MonkeyRunner:MonkeyRunner的录制和回放

    ---------------------------------------------------------------------------------------------------- ...

  10. Add Office 365 Azure Directory into Windows Azure

    Add Office 365 Azure Directory into Windows Azure Pre-Requisite: 1.Azure Subscription to the Microso ...