h5储存 和 cookie储存 和 session

H5的 Web Storage 1、概述: 对于Web Storage来说,实际上是Cookies存储的进化版。如果了解Cookie的人几乎一看Web Storage就会用,如果你从来没用过没了解过Cookie,没关系,看了这篇文章照样轻松玩转Web Storage。首先,学习Web Storage只需背熟这句口诀:“两个接口,四个函数”。

2、口诀:

(1)两个接口:分别是localStorage和sessonStorage

(2)四个函数:分别是setItem、getItem、removeItem和clear

3、localStorage:

(1)特性:

    域内安全、永久保存。即客户端或浏览器中来自同一域名的所有页面都可访问localStorage数据且数据除了删除否则永久保存,但客户端或浏览器之间的数据相互独立。

(2)四个函数:

     A. localStorage.setItem      存储数据信息到本地

     B. localStorage.getItem      读取本地存储的信息

     C. localStorage.removeItem   删除本地存储的信息

     D. localStorage.clear        清空所以存储的信息

 4、sessonStorage:

 (1)特性:

      会话控制、短期保存。会话概念与服务器端的session概念相似,短期保存指窗口或浏览器或客户端关闭后自动消除数据。

 (2)四个函数:

      A. sessionStorage.setItem       存储数据信息到本地

      B. sessionStorage.getItem       读取本地存储的信息

      C. sessionStorage.removeItem    删除本地存储的信息

      D. sessionStorage.clear         清空所以存储的信息

5、四个函数的用法:

(1)localStorage.setItem(键名,键值)

         在本地客户端存储一个字符串类型的数据,其中,第一个参数“键名”代表了该数据的标识符,而第二个参数“键值”为该数据本身。如:

                 localStorage.setItem("coffeePrice", "28");        //有了上一句做参考,这句意思你该理解了吧

(2)localStorage.getItem(键名)

         读取已存储在本地的数据,通过键名作为参数读取出对应键名的数据。如:

                 var data = localStorage.getItem("coffeeType");   //读取对应键名为coffeeType的数据

(3)localStorage.removeItem(键名)          移除已存储在本地的数据,通过键名作为参数删除对应键名的数据。如:

(4)localStorage.clear()          移除本地存储所有数据。如:

                 localStorage.clear();      //保存着的"coffeePrice/28"键/值对也被移除了,所有本地数据拜拜

(5)另外,sessionStorage中的四个函数与以上localStorage类的函数用法基本一致,就不再详解。

6、兼容问题:

有人会说本地存储是H5的新贵,但是对于老、旧的浏览器来说怎么办?那就不用老古董浏览器呗,或者使用cookie作为替代。因为大多使用localStorage是用来存储字符串的,在其他编译型的语言看来,存储字符串能做些什么,但在javascript身上,则大放光彩,可以存储JSON格式的字符串来扩展应用。既然localStorage是存储字符串的,那么在老古董浏览器上,可以通过使用Cookies来做替代方案并做好域内安全。

因为只能存储字符串:但是可以将对象转成json 并存储 window.sessionStorage(会话存储):暂时储存,浏览器关闭之后会清除 window.localStorage (本地存储):本地储存,浏览器关闭之后依旧不会清除,只能人为删除 平时储存的话建议使用sessionStorage

 let obj = {
    name:'xy',
    age:'21'
}
let objStr = JSON.stringify(obj)
sessionStorage.setItem('data-xy',[objStr])
console.log(sessionStorage.getItem('data-xy'))		// {"name":"xy","age":"21"}


let obj1 = JSON.parse(sessionStorage.getItem('data-xy')

cookie 用法示例: 定义对象:

var cookie = {
    set:function(key,val){
        var date=new Date();
        var expiresHours=9;
        date.setTime(date.getTime()+expiresHours*3600);
        console.log(date.toGMTString());
        document.cookie=key + "=" + val +";expires="+date.toGMTString()+";path=/";
    },
    get:function(key){
        var getCookie = document.cookie.replace(/[ ]/g,"");
        var arrCookie = getCookie.split(";")
        var tips;
        for(var i=0;i<arrCookie.length;i++){
            var arr=arrCookie[i].split("=");
            if(key==arr[0]){
                tips=arr[1];
                break;
            }
        }
        return tips;
    }
}

设置cookie:

 cookie.set('text',''测试设置)

获取cookie:

cookie.get('text')

至于session 是服务端的一块内存空间(存放数据) session机制是一种服务器端的机制,服务器使用一种类似于散列表的结构(也可能就是使用散列表)来保存信息。

当程序需要为某个客户端的请求创建一个session时,服务器首先检查这个客户端的请求里是否已包含了一个session标识(称为session id),如果已包含则说明以前已经为此客户端创建过session,服务器就按照session id把这个session检索出来使用(检索不到,会新建一个),如果客户端请求不包含session id,则为此客户端创建一个session并且生成一个与此session相关联的session id,session id的值应该是一个既不会重复,又不容易被找到规律以仿造的字符串,这个session id将被在本次响应中返回给客户端保存。

保存这个session id的方式可以采用cookie,这样在交互过程中浏览器可以自动的按照规则把这个标识发挥给服务器。一般这个cookie的名字都是类似于SEEESIONID。但cookie可以被人为的禁止,则必须有其他机制以便在cookie被禁止时仍然能够把session id传递回服务器。

经常被使用的一种技术叫做URL重写,就是把session id直接附加在URL路径的后面。还有一种技术叫做表单隐藏字段。就是服务器会自动修改表单,添加一个隐藏字段,以便在表单提交时能够把session id传递回服务器。

Cookie与Session都能够进行会话跟踪,但是完成的原理不太一样。普通状况下二者均能够满足需求,但有时不能够运用Cookie,有时不能够运用Session

记录你我
请先登录后发表评论
  • latest comments
  • 总共0条评论