html5存储

html5存储

html5存储和cookie的区别

1. cookie存储在浏览器下，html5存储在磁盘中
2. cookie在服务端发送，html5在客户端使用
3. cookie需要联网使用，html5可以不用网络
4. cookie最多存储4kb,html5看磁盘大小
5. cookie有时间周期，到时间会自动删除，html5除非手动删除，否则一直存在

cookie存储

cookie用户来存储页面的值，一个网站共享一套cookie，cookie并不是浏览器提供的，是由程序员自己创建的，一个文件大小不得超过4kb，每个网站能存储20个左右，在一定期限内cookie会过期

操作

document.cookie设置或返回cookie

注意：如果cookie不给设置时间，则浏览器关闭会消失

时间属性expires是固定的，用日期类型定义

自己封装cookie操作方法

function getcookie(attr){//查询

            var cok=document.cookie

            var arr=cok.split(";")

            for(var i=0;i<arr.length;i++){

                var x=arr[i].split("=")

                if(x[0].trim()==attr){

                    return x[1]

                }

            }

       }

       function setcookie(attr,value,time){//添加修改

            document.cookie=attr+"="+value+";expires="+time

       }

       function delcookie(attr){//删除

           var t=new Date()

           t.setDate(t.getDate()-1)

           document.cookie=attr+"=;expires="+t

       }

       var t=new Date()

       t.setDate(t.getDate()+1)

       setcookie("sex","男",t)

       delcookie("age")

       var v=getcookie("name")

       console.log(v)

       var v1=getcookie("age")

       console.log(v1)

       var v2=getcookie("sex")

       console.log(v2)

cookie作用：登录状态，跟踪用户行为，定制页面，创建购物车

html5本地存储

sessionStorage:会话型存储，在浏览器关闭之后，数据会自动消失

localStorage:本地型存储，除非程序员手动删除，否则一直存在

属性和方法

1. clear()清空数据
2. key()遍历数据
3. getltem(attr)获取数据
4. setltem(attr,value)设置属性值

databease前