浏览器的秘密(cookie cache机制 html5本地存

作者: 编程小飞侠 | 来源:发表于2016-09-04 10:17 被阅读397次

cookie:存储数据,当用户访问了某个网站的时候,我们可以通过cookie来向访问者电脑上存储数据。

1.不同的浏览器存放的cookie位置不一样,也是不能通用的。
2.cookie的存储是以域名形式进行区分的。
3.cookie的数据可以设置名字的。
4.一个域名下存放的cookie的个数是有限制的,不同的浏览器存放的个数不一样。
5.每个cookie存放的内容大小也是有限制的,不同的浏览器存放大小不一样。

QQ截图20160904081818.jpg

我们通过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机制:即浏览器缓存机制,指明当前资源的有效期,控制浏览器是直接从浏览器缓存取数据,还是重新发请求到服务器取数据。

流程图:

QQ截图20160904091913.jpg

搭建离线应用程序

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:存储的数据在浏览器关闭后自动删除。

QQ截图20160904101706.jpg

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对象的常用方法相似

相关文章

  • 浏览器的秘密(cookie cache机制 html5本地存

    cookie:存储数据,当用户访问了某个网站的时候,我们可以通过cookie来向访问者电脑上存储数据。 1.不同的...

  • 简述HTML本地存储

      本地存储,即在用户浏览器中将数据保存在本地,HTML5之前主要是Cookie,HTML5问世后,又出现了四种本...

  • web本地存储基础知识

    HTML5之前的使用本地存储 在html5之前,本地存储使用的时cookie,他的使用场景如下: 浏览器获取一个w...

  • HTML5之LocalStorage本地存储

    一、本地存储 在HTML5诞生之前,网站如果想在浏览器端存储数据,只能使用Cookie,使用Cookie有较多的限...

  • react 之 web存储 localStorage

    在 Html5 中新加入的 localStorage 特性,主要是用来作为本地存储使用的,解决了 cookie 存...

  • node.js cookie

    cookie,存储用户本地信息。 cookie 特点 cookie 保存在浏览器本地,只要不过期,关闭浏览器也会存...

  • HTML5 Web储存

    HTML5 Web存储,一个比cookie更好的本地储存方式 HTML5 Web储存:使用HTML5可以在本地储存...

  • 浏览器缓存cookie和storage

    1.cookie在没有域名的情况下,能存进去么? 场景:在本地存cookie进去,document.cookie=...

  • H5之localStorage 和 sessionStorage

    简介 使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是 cookie, 并且cookie对储...

  • session、cookie、token简要

    cookie cookie是保存在本地终端的数据。cookie由服务器生成,发送给浏览器,浏览器把cookie以k...

网友评论

    本文标题:浏览器的秘密(cookie cache机制 html5本地存

    本文链接:https://www.haomeiwen.com/subject/jpslettx.html