本地存储
简单了解一下:
共同点:都是保存在浏览器端,并且是同源的
Cookie:cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下,存储的大小很小只有4K左右。 (key:可以在浏览器和服务器端来回传递,存储容量小,只有大约4K左右)
sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持,localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。(key:本身就是一个回话过程,关闭浏览器后消失,session为一个回话,当页面不同即使是同一页面打开两次,也被视为同一次回话)
localStorage:localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。(key:同源窗口都会共享,并且不会失效,不管窗口或者浏览器关闭与否都会始终生效)
补充说明一下cookie的作用:
保存用户登录状态。例如将用户id存储于一个cookie内,这样当用户下次访问该页面时就不需要重新登录了,现在很多论坛和社区都提供这样的功能。 cookie还可以设置过期时间,当超过时间期限后,cookie就会自动消失。因此,系统往往可以提示用户保持登录状态的时间:常见选项有一个月、三个 月、一年等。
跟踪用户行为。例如一个天气预报网站,能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的,当利用了cookie后就会显得很人性化了,系统能够记住上一次访问的地区,当下次再打开该页面时,它就会自动显示上次用户所在地区的天气情况。因为一切都是在后 台完成,所以这样的页面就像为某个用户所定制的一样,使用起来非常方便定制页面。如果网站提供了换肤或更换布局的功能,那么可以使用cookie来记录用户的选项,例如:背景色、分辨率等。当用户下次访问时,仍然可以保存上一次访问的界面风格。
本地存储对象–web storage
-
web storage简介(是为了弥补cookie的不足,而不是替代cookie)
cookie简介:在客户端存储数据,对于web应用来说,它是一个在客户端与服务器之间来回传送文本值的内置机制。
1.cookie的不足:
大小限制:被限制在4k,不能接受文件或邮件那样的大数据
宽带的限制:cookie数据会在服务器与浏览器间来回传送
安全风险:频繁传送与数据在网络可见,如果数据不加密,有安全风险
操作复杂:在客户端使用JavaScript不好操作,但在服务器端却很好操作
2.综合cookie的优点与缺点,对于较小的数据,使用cookie还是可以的web storage简介:也是在客户端存储数据,但是可以存储大量的数据,根据提供的接口,访问数据也很方便。
1.优势:
存储容量:更大,safari,等为5mb,ie8以上为每个网域10mb
零宽带:仅仅存储在本地,不会与服务器发生交互行为,所以没有宽带占用问题
编程接口:方便数据操作
独立的存储空间:每个域或者子域都有独立的存储空间,存储空间也是完全独立的,所以不会发生数据混乱 -
localstorage(本地存储)和sessionstorage(会话存储)
对比:
1.和cookie、session对比:c 和s 完全是服务器可以操作的数据,l和s则完全是浏览器客户端可以操作的数据
2.local和sessionstorage完全继承同一个storageapi接口。
3.主要区别在于数据存在的时间范围和页面范围
| session storage | localstorage |
|数据会保存到它的窗口或标签关闭时|数据的生命周期比窗口或浏览器的生命周期长|
|数据只在构建它们的窗口或标签可见 |数据可被同源的每个窗口或标签也共享 |
要访问同一个localStorage对象,页面必须来自同一域名检测浏览器支持web storage
function checkWebStorage(){
if(window.localStorage){
alert(“支持”);
}else{alert(“不支持”);}
}
if(window.sessionStorage){
alert(“支持session”);
}else{alert(“不支持session”);}
window.addEventListener(“load”,checkWebStorage,false); -
设置和获取storage数据:因为local和sessionstorage拥有完全相同的接口操作数据,所以方法完全相同(键/值)
保存数据到sessionstorage:window.sessionStorage.setItem(“key”,“value”);
window.sessionStorage.key=“value”;
window.sessionStorage[“key”]=“value”;
从sessionstorage中获取数据:value=window.sessionStorage.getItem(“key”);
value=window.sessionStorage.key();
value=window.sessionStorage[“key”]; -
storage api的属性和方法:storage为接口(interface storage)
1、增storage.setitem(“key”,value);
删:storage.removeitem(“key”);//只能删除一行
storage.clear();//清空存储中的所有键名
改storage:setitem();
查:storage.getitem(“key”);
storage.key(n);返回存储中以索引为n的键名
storage.length;//为只读属性,返回数据的存储量;
2、在使用localstorage和sessionstorage时,上面的方法都可用,但要注意其影响的范围
3.storage接口的应用: var storage=window.sessionStorage;storage.getitem(key); -
存储json对象的数据(json不是对象,是一种数据格式)
虽然webstorage保存{键/值}类型,但是一些浏览器把数据限定为字符串类型 ,而且对于一些复杂结构的数据,管理起来较为混乱,对于复杂结构的数据,可以用json对象来处理。
1.序列化json格式的数据
由于storage是以字符串保存数据的,因此在保存json格式的数据之前,需要把json格式的数据保存为字符串,成为序列化
var stringdata=JSON.stringify(jsonobject);//把json格式的数据对象jsonobject序列化为字符串数据stringdata。
2.把数据反序列化为json格式的数据对象jsonobject。
var jsonobject=JSON.parse(stringdata);//反序列也可以使用eval(),但是安全隐患很大,而且parse只反序列化json格式的,否则会出错,eval可以反序列任意的字符串,会有隐患。
function savestorage(foj){
var jsonobject=new Object();
jsonobject.name=foj.name.value;
jsonobject.age=foj.age.value;
jsonobject.email=foj.email.value;
var stringdata=JSON.stringify(jsonobject);//把所有的信息存储为字符串的键值类型
var storage=window.sessionStorage;
storage.setItem(“key”+flag,stringdata);//每一个键存储了一个完整的信息
flag++;
}
function show(){
var result="";
var storage=window.sessionStorage;
for(var i=0;i<storage.length;i++){
var key=storage.key(i);
var stringdata=storage.getItem(key);
var jsonobject=JSON.parse(stringdata);
result=“姓名:”+jsonobject.name+“年龄:”+jsonobject.age;
}
document.getElementById(“showmessage”).innerHTML=result;
} -
storage api的事件
有时候会有多个网页或标签页同时访问存储的数据的情况,为保证修改的数据能够及时反馈到另一个页面,html5有事件通知机制,会在更新时触发,无论监听的窗口是否存储过该数据,只要与执行存储的窗口是同源的,都会触发。
1.window.addEventListener(“storage”,EventHandle,true);//只要是同源的storage事件发生,包括local和sessionstorage,都能够因为数据更新而触发事件。
2.storageevent接口(interface storageevent:event)
属性:key
oldValue:
newValue:
url
storageArea:
不同标签之间的存储
https://www.jianshu.com/p/5f0e6d8fd36a
https://blog.csdn.net/zhuzhupozhuzhuxia/article/details/76795472
对于不同标签之间是否刷新,则再仔细看看
- cookie和session篇
https://blog.csdn.net/liyifan687/article/details/80077928
https://www.jianshu.com/p/9a561b36e9f3
1.虽然两个都是能保存状态的,但是cookie是服务器保存在本地机器上存储的一小段文字,发往同一个服务器,是保持客户端状态的,而session是是服务器存储用户数据的类hashtable结构。cookie是网页浏览器用来保存用户信息的文件(保存在客户端?),sessionID和对应的用户信息、用户操作记录在服务器上,这些记录就是session。(保存在服务器端?)服务器发sessionid给客户端,发set-cookie给客户端,客户端发cookie给服务器端。Cookie的最大的作用就是存储sessionId用来唯一标识用户
2.Session的实现方式和Cookie有一定关系。建立一个连接就生成一个session id,打开几个页面就好几个了,这里就用到了Cookie,把session id存在Cookie中,每次访问的时候将Session id带过去就可以识别了.