cookie:存储数据,当用户访问了某个网站的时候,我们可以通过cookie来向访问者电脑上存储数据。
1.不同的浏览器存放的cookie位置不一样,也是不能通用的。
2.cookie的存储是以域名形式进行区分的。
3.cookie的数据可以设置名字的。
4.一个域名下存放的cookie的个数是有限制的,不同的浏览器存放的个数不一样。
5.每个cookie存放的内容大小也是有限制的,不同的浏览器存放大小不一样。
我们通过document.cookie来获取当前网站下的cookie的时候,得到的字符串形式的值,他包含了当前网站下所有的cookie.他会把他所有的cookie通过一个分号+空格的形式串联起来。
如果我们想长时间存放一个cookie。需要在设置cookie的时候同时给他设置一个过期的时间
cookie默认是临时存储的,当浏览关闭进程的时候自动销毁。
cookie的写法:document.cookie='名字=值;expires='+字符串格式的时间
var oDate=new Date();
oDate.setDate(oDate.getDate()+t); 设置过期时间
我们可以通过函数封装去设置cookie 获取cookie 删除cookie
//设置cookie
function setcookie(key,value,t){
var oDate=new Date();
oDate.setDate(oDate.getDate()+t);
document.cookie=key+'='+encodeURL('value')+';expires='+oDate.toGMTString();
}
//获取cookie
function getcookie(key){
var arr1=document.cookie.split('; ');
for(var i=0i<arr1.length;i++){
var arr2=arr1[i].split('=');
if(arr2[0]==key){
return decodeURL(arr2[1]);
}
}
}
//删除cookie
function removecookie(key){
setcookie(key,'',-1);
}
cache机制:即浏览器缓存机制,指明当前资源的有效期,控制浏览器是直接从浏览器缓存取数据,还是重新发请求到服务器取数据。
流程图:
搭建离线应用程序
1.服务器设置头信息:
--AddType text/cache-manifest.manifest
2.html标签加:
--manifest="xxx.manifest"
3.写manifest文件:离线的清单列表
--先写:CACHE MANIFEST
--FALLBACK : 第一个网络地址没获取到,就走第二个。
--NETWORK: 无论缓存中存在与否,均从网络获取。
离线缓存为应用带来的三大优势:
1:离线浏览--用户可以在应用离线时使用它们;
2:速度--已缓存资源加载的更快;
3.减少服务器负载--浏览器将只从服务器下载更新过或更改过的资源;
HTML5本地存储:在之前的版本中是通过cookie实现的,html5本地存储速度快而且安全。
html5有两种不同的对象可用来存储数据:
(1)localStorage:适用于长期存储数据,浏览器关闭后数据不丢失。
(2)sessionStorage:存储的数据在浏览器关闭后自动删除。
localStorage对象的常用方法:
1.存储:localStorage.setItem(key,value);
如果key存在,那么更新vaue
2.获取:localStorage.getItem(key);
如果key值不存在,那么返回null
3.删除:localStorage.removeItem(key);
一旦删除,key对应的数据将会全部删除
4.全部清除:localStorage.clear();
某些时候使用localStorage.removeItem逐个删除太麻烦了,可以使用clear,执行的后果是清除所有localStorage对象保存的数据
sessionStorage对象的常用方法与localStorage对象的常用方法相似