Document对象的一些小总结

cookie 是document对象的一个方方法,每次请求url时都会传递到服务器现代浏览器允许cookie总数超过300个,但是部分浏览器对单个cookie大小限制仍然有4Kb的限制
先来cookie 存储都有哪些选项
   name   要存储的cookie名字
   value  要存储的cookie的值  不允许包含分号,逗号和空白符 因此存储钱一般都可以采用encodeURIComponent()对值进行编码,读取的时候 用decodeURIComponent()进行解码
   max_age  单位为秒  要超时的秒数  
   path      如果把路径设置成:"/"  那么cookie 可以对任何 http://www.example.com这台服务器上的页面都是可见的 (该状况下和localstorage具有同样的作用域)
             如果把路径设置成:"/catalog"  那么cookie 可以对任何 http://www.example.com/catalog/ 下面的页面都是可见的 (不能通过path来做访问控制-588)
   domain    默认为当前服务器的域
             子域之间的cookie共享可通过设置".example.com",path设置成:"/" 
             那么该cookie 就对所有catalog.example.com、orders.example.com以及其他.example.com 域下的任何服务器都可见
   secure   bool类型的值   表明cookie 以何种方式通过网络传递 默认是以不安全的形式传递的
  
  存储形式:
      document.cookie=name=encodeURIComponent(value);max_age=1200;path="/"domain="";secure="";  其中name和value 是必须的
  读取:
      function getCookie(){
       var cookie={};
       var all=document.cookie;
       if(all==="") return cookie;
       var list=all.split(";");
       for(var i=0;i<list.length;i++){
       var cook=list[i];
       var p=cook.indexOf("=");
       var name=cook.substring(0,p);
       var value=cook.substring(p+1);
       value=decodeURIComponent(value);
       cookie[name]=value;
       }
       return cookie;
      }
  删除:  只需要一个name 即可
       document.cookie=name=;max_age=0
      

localStorage 和sessionStorage
   这个两个属性都代表同一个Storeage对象: 一个持久化关联的数组 数组使用字符串来索引 存储的值也是字符串形式的
   两者的主要区别为:
        localStorage 用于长期保存网站的数据并且站内任何页面都可访问该数据
        sessionStorage 用于临时保存针对一个窗口或者标签页的数据 书上介绍的是: 在访客关闭窗口活标签页之前,这些数据都是存在的,而关闭之后就会被浏览器删除;不过只要用户不关闭窗口或者标签页,就算他从你的网站跑到别人的网站再回来,数据依然是存在的
        (可跨越页面刷新而存在) 存储在sessionStorage中的数据 只能由最初给对象存储数据的页面能访问到,所以多页面访问有限制
  存储:
     localStorage.setItem(name,value)   标准的存
     localStorage[name]=value
     localStorage.name=value
  读取:
     value=localStorage.getItem(name)   标准的读
     value=localStorage[name]
     value==localStorage.name
   可枚举
      for(var i=0;i<localStorage.length;i++){
      var name=localStorage.key(i);
      var value=localStorage.getItem(name);
      }
      for( var key in localStorage){
      var name=key;
      var value=localStorage.getItem(name);
      }
  删除:
     删除一项  localStorage.removeItem(name);
     删除全部  localStorage.clear();
  事件:(IE8及以前版本不支持该事件)
     window.addEventListener("storage",function(e){
        console.log(e.key+"---"+ e.newValue+"---"+ e.oldValue+"----"+ e.url+"----"+ e.url+"---"+ e.domain+"----"+ e.storageArea)
    },false)
    触发条件:当存储数据真正发生改变的时候(含删除)
    对象属性(e):
        key 被设置或者移除的项的名字 (clear 触发的时候 key=null)
        newValue  保存该项的新值 (调用removeItem()时 该属性为null)
        oldValue  改变或者删除该项前 保存该项原先的值 (当插入一个新项时该值为null)
        url   触发该文档变化所在的url
  需要注意的是 其保存的都是字符串 取值运用的时候 需要注意转换格式
         localStorage 和存储事件都是采用的广播机制,浏览器会向目前正在访问同样站点的所有窗口发送消息(不会向本窗口发送,IE会向本窗口发送)

时间: 2025-01-15 11:14:50

Document对象的一些小总结的相关文章

HTML静态网页--JavaScript-Window.document对象

1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:    var a =docunment.getElementById("id");将找到的元素放在变量中:    docunment.getElementByName("name"):根据name找,找出来的是数组:    docunment.getElementByTagName("name&

Unit06: 外部对象概述 、 window 对象 、 document 对象

Unit06: 外部对象概述 . window 对象 . document 对象 小代码演示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script> //1.确认框 function del() { var b = confirm("确定要删除此数据吗?&qu

课堂所讲整理:HTML--8Window.document对象

1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:    var a =docunment.getElementById("id");将找到的元素放在变量中:    docunment.getElementByName("name"):根据name找,找出来的是数组:    docunment.getElementByTagName("name&

Window.document对象(1)

1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:     var a =docunment.getElementById("id");将找到的元素放在变量中:     docunment.getElementsByName("name"):根据name找,找出来的是数组:     docunment.getElementsByTagName("

3.26课&#183;&#183;&#183;&#183;&#183;&#183;&#183;&#183;&#183;window.document对象

1.Window.document对象 一.找到元素:    docunment.getElementById("id"):根据id找,最多找一个:    var a =docunment.getElementById("id");将找到的元素放在变量中:    docunment.getElementByName("name"):根据name找,找出来的是数组:    docunment.getElementByTagName("na

JS中window.document对象

小知识点注:外面双引号,里面的双引号改为单引号:                  在div里面行高设置和整个外面高度一样,才能用竖直居中,居中是行居中                  文本框取出来的值是字符串,需要用parseint()转化为数字 Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:    var a =docunment.getElementById("id"

HTML-教案-Window.document对象

1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:    var a =docunment.getElementById("id");将找到的元素放在变量中:    docunment.getElementsByName("name"):根据name找,找出来的是数组:    docunment.getElementsByTagName("nam

BOM对象,math对象document对象的属性和操作

Math对象 //该对象中的属性方法 和数学有关. abs(x) 返回数的绝对值. exp(x) 返回 e 的指数. floor(x) 对数进行下舍入. log(x) 返回数的自然对数(底为e). max(x,y) 返回 x 和 y 中的最高值. min(x,y) 返回 x 和 y 中的最低值. pow(x,y) 返回 x 的 y 次幂. random() 返回 0 ~ 1 之间的随机数. round(x) 把数四舍五入为最接近的整数. sin(x) 返回数的正弦. sqrt(x) 返回数的平方

document对象操作:浏览器页面文件

//找元素 1.根据id找 <div id="d1" cs="ceshi"><span>document对象</span></div> //var d1 = document.getElementById("d1"); //alert(d1); 2.根据class找 <div class="d">111</div> <span class="