首页/html5前端开发/cookie总结以及html5中的session比较

cookie总结以及html5中的session比较

发布-网页培训班 | 浏览量-

 cookie的基本用法

 
cookie的特性:
同一个网站中所有页面共享一套cookie,完全存放在客户端;
数量,大小有限;
过期时间;(保质期),如果不设置时间,过期时间是会话结束的时间,
 
操作cookie:
js中使用cookie:document.cookie;其实就是document的一个属性;
 
操作cookie:
-格式:名字=值;
-不会覆盖
-过期时间:expires=时间(不设置,等于浏览器关闭时间) 
-cookie是以字符串的形式来给赋值
 
cookie 函数封装:
 
<script type="text/javascript">
            //设置cookie值
            function setCookie(name,value,iDay){
                var oDate=new Date();
                oDate.setDate(oDate.getDate()+iDay);
                document.cookie=name+"="+value+";expires="+oDate;
            }
            //获取cookie值,注意,分号后面还有一个空格,cookie是以一个分号和空格
            function getCookie(name){
             var aa=document.cookie.split("; ")
             for(var i=0;i<=aa.length-1;i++){
//              document.write(aa[i]+"</br>")
                var bb=aa[i].split("=");
               if(bb[0]==name){
                return bb[1];
               }
             }
             return " ";
            }
            //删除cookie值
           function removeCookie(name){
            setCookie(name,"2",-1);
           }
        setCookie("usename","我是用户名",5);
        setCookie("password","我是密码",5);
//       
        alert(getCookie("password"));
        alert(getCookie("usename"));
//      alert(document.cookie)
        
</script>
 
 
 
web storage 的两种方式
1. sessionStorage对象: 就是把数据保存在session对象之中。 session就是在打开网站到关闭网站之间要求进行保存的数
 
方法:
 
  sessionStorage.setitme('key','value');
  //或者是sessionStorage.key = 'value';
 
 
  临时数据读取的方法:
  变量=sessionStorage.getItem('key')
  //或者是sessionStorage.key;
 
2. localStorage对象:  就是将数据保存在客户端本地的硬件设备至上面,如果浏览器被关闭,这个数据不会丢失,下次打开可以继续使用。这个功能就是我们的localStorage永久保存功能。
方法:
localStorage.setItem('key','value');
//或者
localstorage.key;
 
读取的方法:
变量=localStorage.getItem('key');
//或者
变量=localStorage.key;
 
3.属性
localStorage.key(index)获取的是键值;
localStorage.lenth 获取的是长度
 

js存取删除cookie

HTMl5的存储方式sessionStorage和localStorage详解

原文地址:http://www.35ui.cn/post/20160822942.html

标签cookiesessionHTML5

上一条: 用CSS3 绘制你需要的几何图形
下一条: html5自适应代码| html5 手机自适应代码

或许你还对下面的文章感兴趣