本地存储之cookie和storage

它们都是保存在客户端中的文件,保存的格式都是字符串

cookie

1、cookie可能被禁用,当用户非常注重个人隐私保护时,他很可能禁用浏览器的cookie功能
2、发送http请求时会把cookie放在请求头中,服务器通过cookie来了解客户端状态
3、大小限制4k左右,低版本浏览器会有数量的限制
4、可以设置有效时间,超过时间就会消失
5、安全性不够高,所有的cookie都是以纯文本形式记录与文件中,因此保存用户名和密码等重要信息最好事先加密处理
6、有路径的概念,可以限制cookie在某个路径下
7、在同源窗口中都是共享的
8、cookie是与浏览器相关的,即使是同一个页面,不同浏览器之间所保存cookie的也不能相互访问的
9、每个cookie都是硬盘上的一个文件,因此很可能被用户删除

设置cookie:
 document.cookie = "name=aimi; age=20;"  /* 存储多个名/值对,用分号加空格(; )隔开 */

在cookie的名/值中不能使用分号、逗号、等号以及空格。
在cookie的名中做到很容易,但在保存的值中是不确定的,所以用escape()函数进行编码,它能将一些特殊符号使用十六进制表示,例如空格将会编码为“20%”,从而可以存储cookie值中,而且使用此种方案还可以避免中文乱码的出现。在取出值后用unescape()进行解码就可以得到原来保存的值。

获取cookie:
var strCookie = document.cookie;

一次获取所有的cookie值,而不能指定cookie名称来获取值,这正是处理cookie值最麻烦的地方,需要通过截取字符串循环遍历出某个名称对应的值。

设置保存有效期:

没有设置时间的cookie都是单会话,当浏览器关闭后将会丢失,事实上这些cookie仅存储在内存中,而没有建立相应的硬盘文件。
格式:document.cookie = "name=value; expiress=GMT_String"; /* GMT_String 是以GMT格式表示的时间字符串

var expiresDays = 30; /* 30天之后过期 */
var data = new Date().getTime()+expiresDays*24*3600*1000;
document.cookie = "name=aimi; expires=" + date.toGMTString(); 
删除cookie:

为了删除一个cookie,可以将其过期时间设定为一个过去的时间。

var date=new Date();  //获取当前时间
date.setTime(date.getTime()-10000);  //将date设置为过去的时间
document.cookie="userId=828; expires="+date.toGMTString(); //将userId这个cookie删除
指定cookie可访问的路径:

默认情况下,如果在某个页面创建一个cookie,那么该页面所在目录中的其他页面也可以访问该cookie,如果这个目录下还有子目录,则在子目录中也可以访问。例如在www.xxxx.com/html/a.html中所创建的cookie,可以被www.xxxx.com/html/b.htmlwww.xxx.com/ html/ some/c.html所访问,但不能被www.xxxx.com/d.html访问。
为了控制cookie可访问的目录,需要使用path参数设置cookie,
doment.cookie = "name=value; path=cookieDir"; 其中cookieDir表示可访问cookie的目录。例如:document.cookie="userId=320; path=/shop";就表示当前cookie仅能在shop目录下使用。
如果要使cookie在整个网站下可用,可以将cookie_dir指定为根目录,例如:

指定可访问cookie的主机名:

和 路径类似,主机名是指同一个域下的不同主机,例如:www.google.comgmail.google.com就是两个不同的主机名。默认情况下, 一个主机中创建的cookie在另一个主机下是不能被访问的,但可以通过domain参数来实现对其的控制,其语法格式为:

document.cookie="name=value; domain=cookieDomain";

以google为例,要实现跨主机访问,可以写为:

document.cookie="name=value;domain=.google.com";

这样,所有google.com下的主机都可以访问该cookie。
备注:cookie是引自阿伟~博客

localStorage

1、永久保存,可以手动删除
2、客户端保存,不会请求服务器
3、在所有同源窗口中是共享的

sessionStorage

1、临时会话,从页面打开到页面关闭的时间段窗口的临时存储,页面关闭,本地存储消失
2、存储限制5M
3、客户端保存,不会请求服务器
4、即是同一个页面,在不同的浏览器窗口中不能共享;

localStorage和sessionStorage操作

setItem存储value
sessionStorage.setItem("key","vaule");
localStorage.setItem("key","vaule")
getItem获取value
sessionStorage.getItem("key");
localStorage.getItem("key")
removeItem删除key
sessionStorage.removeItem("key","vaule");
localStorage.removeItem("key","vaule")
clear清楚所有的key/value
sessionStorage.clear();
localStorage.clear();
其他操作方法:点操作和[]

web Storage不但可以用自身的setItem,getItem等方便存取,也可以像普通对象一样用点(.)操作符,及[]的方式进行数据存储,像如下的代码:

varstorage=window.localStorage;storage.key1="hello";storage["key2"]="world";console.log(storage.key1);console.log(storage["key2"]);
localStorage和sessionStorage的key和length属性实现遍历

sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历,例如下面的代码:

varstorage=window.localStorage;for(vari=0,len=storage.length;i<len; i++) { var key=storage.key(i); var value=storage.getItem(key); console.log(key+"="+value); }

###storage事件
storage还提供了storage事件,当键值改变或者clear的时候,就可以触发storage事件,如下面的代码就添加了一个storage事件改变的监听:

if(window.addEventListener){window.addEventListener("storage",handle_storage,false);}elseif(window.attachEvent){window.attachEvent("onstorage",handle_storage);}functionhandle_storage(e){if(!e){e=window.event;}}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,290评论 6 491
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,107评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,872评论 0 347
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,415评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,453评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,784评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,927评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,691评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,137评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,472评论 2 326
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,622评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,289评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,887评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,741评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,977评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,316评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,490评论 2 348

推荐阅读更多精彩内容