精华内容
下载资源
问答
  • CookieStorage区别

    2020-07-29 11:43:58
    存储大小:Cookie:4k Storage:5M; 有效期:Cookie拥有有效期,Storage永久存储; 路径:Cookie有路径限制,Storage只存储在域名下; API:Cookie没有特定的API,Storage有对应的API; Cookie会发送到服务器端,...

    存储大小:Cookie:4k  Storage:5M;

    有效期:Cookie拥有有效期,Storage永久存储;

    路径:Cookie有路径限制,Storage只存储在域名下;

    API:Cookie没有特定的API,Storage有对应的API;

    Cookie会发送到服务器端,存储在内存中,Storage只存储在浏览器端;

     

    展开全文
  • 关于cookie和Storage

    千次阅读 2016-08-17 19:34:11
    Cookie是由Web服务器保存在用户浏览器(客户端)上的小 文本文件,它可以包含有关用户的信息 。无论何时用户链接到服务器 , Web 站点都可以访问 Cookie信息。 目前有些 Cookie是临时的 , 有些则是持续的。临时的 ...
    (文章仅是本人梳理的知识,无法完全保证正确性) 
    

    文章目录:

    1、cookie的简介

        1.1 cookie的特性

        1.2 cookie的限制 

        1.3 cookie的操作

    2、Storage的简介

        2.1  Storage对象共有的属性/方法

        2.2 window的storage事件

        2.3 限制

        2.4 多页面同步更新效果


    1、cookie的简介

    Cookie是在HTTP协议下 ,服务器或脚本可以维护客户工作站上信息的一种方式 。Cookie是由Web服务器保存在用户浏览器 (客户 端)上的小 文本文件,它可以包含有关用户的信息 。无论何时用户链接到服务器 , Web 站点都可以访问 Cookie信息。
    目前有些 Cookie是临时的 , 有些则是持续的。临时的 Cookie只在浏览器上保存一段规定的时间,一旦超过规定的时间, 该 Cookie就会被系统 清除
    持续的 Cookie则保存在用户的 Cookie文件中, 下一次用户返回时, 仍然可以对它进行调用。在 Cookie文件中保存 Cookie,有 些用户 担心 Cookie中的用户信息被一些别有用心的人窃取 ,而造成一定的损害 。其实, 网站以外的用户无法跨过网站来获得Cookie信息 如果因为这种担心而屏蔽 Cookie,肯定会因此拒绝访问许多站点页面 。 (以上内容来自百度百科)

    1.1 cookie的特性

    cookie是一个在客户端和服务器间来回传送文本值的内置机制。服务器可以基于其放在cookie中的数据在不同的页面间追踪客胡户的信息。用户每次访问某个域时,cookie数据都会被来回传送。由于这个特性,就会出现数据泄露的情况。(后面会介绍)。


    1.2 cookie 的限制

    a:每个cookie的大小限制在4kb左右,并且每个页面的cookie的数量也都是有限制的,不同的浏览器对cookie限制的数量是不同的。

    b:cookie在服务器端和客户端在头信息上传递,会影响性能。

    c:cookie能够被同源网页共享,造成信息泄露。比如下面这张图片就演示了这个过程。而sessionStorage能够跨页面(使用该应用的页面)暂存如启程日期这样的临时数据,又不会将其泄露到用户仍在浏览其他航班信息的窗口中。


    1.3 cookie的操作

    Javascript对cookie提供了document.cookie属性(很差的实用性,一般都会对其进行封装)。

    当用document.cookie来获取值时,它返回当前页面可用的(根据cookie的域、路径、失效时间和安全设置)所有cookie的字符串,一系列右分号隔开的名值对,如

    name1=value1;name2=value2

    。所有名字和值都是经过URL编码的, (encodeuRIComponent()),所以必须使用decodeURIComponent()来解码。

    当用document.cookie来设置值时,格式如:

    name=value;expires=expires_time;path=domain_path;domain=domain_name;secure;

    其中,name和value是必须的。例如:

    document.cookie = encodeURIComponent("name") + "=" + encodeURIComponent("real");

    要添加额外参数,如。

    document.cookie = document.cookie + "; domain = .abc.com; path=/";

    当客户端每次向服务器发送请求的时候都会发送这个cookie;当浏览器关闭的时候,它就会被删除。

    如果设置了secure标志,如:

    document.cookie += "; secure";

    (注意这里secure是非名值对的,仅仅一个单词)。表明这个cookie只能通过SSL(secure  socket layer)连接才能传输。

    下面是一种cookie的封装(来自javascript高级程序设计)

    var CookieUtil = {
    	get:function(name){
    		var cookieName = encodeURIComponent(name)+"=",
    			cookieStart = document.cookie.indexOf(cookieName);
    			cookieValue = null;
    			
    		if(cookieStart > -1){
    			var cookieEnd = document.cookie.indexOf(";",cookieStart);
    			if(cookieEnd == -1){
    				 cookieEnd = document.cookie.length;
    			}
    			cookieValue = document.cookie.substring(cookieStart + cookieName.length,cookieEnd);
    		}
    		
    		return cookieValue;
    	},
    	set:function(name,value,expires,path,domain,secure){
    		var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
    		if(expires instanceof Date){
    			cookieText += ";expires=" + expires.toGMTString();
    		}
    		if(path){
    			cookieText += ";path=" + path;
    		}
    		if(domain){
    			cookieText += ";domain=" + domain;
    		}
    		if(secure){
    			cookieText += "; secure";
    		}
    		document.cookie = cookieText;
    	}
    	unset:function(name,path,domain,secure){
    		this.set(name,"",new Date(0),path,domain,secure); 
    	}
    }

    2、Storage的简介

    有时候,一个应用程序会用到多个标签页或窗口中的数据,或多个视图中共享的数据。在这种情况下,就需要用到H5的localStorage。localStorage和sessionStorage在编程上唯一的区别是名称不同。二者在行为上的差异是数据的保存时长以它们的共享方式。如下表展示了两者的区别。

    sessionStorage和localStorage的区别
    sessionStoragelocalStorage
    保存时长:数据会保存到存储它的窗口或标签页关闭时保存时长:长期存储在浏览器中
    共享方式:数据只在构建它们的窗口或者标签页可见共享方式:数据可被同源的每个窗口会标签页共享。



    2.1 Storage对象共有的属性/方法

    length:表示目前Storage对象中存储的键值对的数量。(仅在同源情况下)

    key(index):允许获取一个指定位置的键。最有用的情况是从0开始遍历到(length-1),拿个每个键名,然后再对其进行操作。

    for(var i=0,len=localStorage.length;i<len;i++){
    	var name = localStorage.key(i);
    	localStorage.setItem(name,'value'+i);
    }
    getItem(key):拿到给定的key返回对应的值的一种方式。另一种方式是将Storage对象当做数组,将键当做索引。如:localStorage['sex']。如果存在键为sex的话。

    setItem(key,value):将对应的键值对存入到指定的Storage(localStorage或者sessionStorage)。如果已经存在相同的key,则value会覆盖原来的值。

    removeItem(key):移除key对应的键值对。如果没有key,则不执行任何操作。

    clear():当你不需要缓存或者需要将所有的缓存键值对重新设置时,调用对用的Storage对象。如:localStorage.clear()可以清楚本地缓存中的所有键值对儿。如果Storage对象本来就是空的,那么他不执行任何操作。


    2.2 window的storage事件
    某些情况下,一个页面修改其缓存数据时,其他页面的缓存数据也要做相应修改并做相应的操作。以上述订票为例,一个页面更改了行程日期后,如果其他同源页面设置了监听事件,那么可以基于这些改变的数据做其他操作。这里用的window的storage事件。一个页面的缓存发生改变时,会触发其他页面的window.onstorage或window.addEventListener('storage',handle,false)事件。

    window.addEventListener('storage',handle,false);
    这个事件的handle函数有个参数。它是StorageEvent对象。它包含了与存储变化有关的所有必要信息。 function handle(e)。{......}。e就是StorageEvent对象。属性有:

    key:包含了存储过程中发生变化(更新,删除)的键。

    oldValue:发生变化前的值。对于新添加的数据,oldValue的属性值是null。

    newValue:发生变化后的值。对于删除的数据,newValue的值是null。

    url:指向Storage时间发生的源。

    storageArea:一个引用,指向值发生变化的Storage。

    window.onstorage = function(e){
    	console.log(e.url);
    	console.log(e.storageArea);
    	for(var i=0;i<len;i++){
    		if(e.newValue == aInputs[i].value){//对radio和checkbox才使用checked事件
    			aInputs[i].checked = true;
    		}else if(e.oldValue == aInputs[i].value){
    			aInputs[i].checked = false;
    		}
    	}
    }


    上面控制台输出的第一个是url。第二个是storageArea对象。(选中的数据)


    2.3 限制

            与其他客户端数据存储方案类似,Storage同样也有限制。这些限制因浏览器而异。一般来说,每个限制是以源(协议,域名,端口)为单位的。也就是说,每个来源都有固定大小的空间保存自己的数据。所以在实际应用中需要考虑到这种限制。不过对于文本数据来说的话,这种限制是足够的。

    对于localStorage而言,大多数桌面浏览器都会设置5MB的限制。Chrome和Safari对每个来源的限制是2.5MB。iOS版Safari和Andriod版Webkit的限制也是2.5MB。

    对sessionStorage的限制也是因浏览器而异。Chrome、Safari、iOS版Safari的Android版Webkit都有限制,也是2.5MB。IE8+和Opera对sessionStorage的限制是5MB。


    2.4 多页面更新效

    我们有这样一个需求。在两个同源页面,一个页面更新了信息,另一个页面随之更新。传统的做法是发送一个ajax请求给服务器,在同源页面检测(定时?)服务器的内容变化,一旦变化,这个同源页面的信息也随之变化。这个一来一回的http请求(相应)会拖慢页面相应速度,小号cpu资源。

    而我们使用localStorage就很好的解决了这个问题。关键代码如下。

    <body>
    	<p><input type="checkbox" value="萝卜" />萝卜</p>
    	<p><input type="checkbox" value="青菜" />青菜</p>
    	<p><input type="checkbox" value="西红柿" />西红柿</p>
    	<p><input type="checkbox" value="茄子" />茄子</p>
    	
    <script>
    	window.onload = function(){
    		var aInputs = document.getElementsByTagName('input'),
    			len = aInputs.length;
    		for(var i=0;i<len;i++){
    			if(aInputs[i].type == "radio" || aInputs[i].type == "checkbox"){
    				if(window.localStorage.getItem('food'+i)){
    					aInputs[i].checked =  true;
    				}
    			}
    		}
    		
    		for(var i=0;i<len;i++){
    			aInputs[i].index = i;
    			aInputs[i].onclick = function(){
    				if(this.type == "radio" || this.type == "checkbox"){
    					if(this.checked){//对radio和checkbox才使用checked事件
    						window.localStorage.setItem('food'+this.index,this.value)
    					}else{
    						window.localStorage.removeItem('food'+this.index);
    					}
    				}
    			} 
    		}
    		
    		window.onstorage = function(e){
    			console.log(e.url);
    			console.log(e.storageArea);
    			for(var i=0;i<len;i++){
    				if(e.newValue == aInputs[i].value){//对radio和checkbox才使用checked事件
    					aInputs[i].checked = true;
    				}else if(e.oldValue == aInputs[i].value){
    					aInputs[i].checked = false;
    				}
    			}
    		}
    	}
    </script>
    </body>




    展开全文
  • 服务器告诉浏览器设置一下cookie),浏览器会将cookie以key/value保存到某个目录的文本文件内,下次请求同意网站时就发送该cookie给服务器(前提是浏览器设置为启用cookiecookie通过HTTP请求报文响应报文配合完成...

    Cookie概念:

    Cookie由服务器端生成,发送给user-Agent(一般是浏览器,服务器告诉浏览器设置一下cookie),浏览器会将cookie以key/value保存到某个目录的文本文件内,下次请求同意网站时就发送该cookie给服务器(前提是浏览器设置为启用cookie)cookie通过HTTP请求报文和响应报文配合完成。

    cookie 的不可跨域名性
    cookie是存于用户硬盘的一个文件,这个文件通常对应于一个域名。cookie可以跨越同一个域名下的多个网页,但不能跨越多个域名使用。

    cookie 的缺点
    cookie体积过大会造成请求和响应速度变慢。
    默认浏览器会任何请求都把cookie带上去,哪怕是静态资源。
    cookie可以在前后端修改,数据容易篡改或伪造。
    cookie对于敏感数据的保护基本是无效的。
    有些用户是禁用cookie的


    Session概念:
    web应用程序中还经常使用session来记录客户端的登录状态。不同于cookie,session保存在服务器上。session相当于程序在服务器上建立一份客户档案,客户来访时只需要查询客户档案表就可以了

    Cookie和Session区别:

    1,cookie数据存放在客户的浏览器上,session数据放在服务器上;

    2,cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗,考虑到安全应当使用session;

    3,session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能。考虑到减轻服务器性能方面,应当使用COOKIE;

    4,单个cookie在客户端的限制是4K,很多浏览器都限制一个站点最多保存 20 个 cookie;

    Cookie和Session的方案虽然分别属于客户端和服务端,但是服务端的session的实现对客户端的cookie有依赖关系的,服务端执行session机制时候会生成session的id值,这个id值会发送给客户端,客户端每次请求都会把这个id值放到http请求的头部发送给服务端,而这个id值在客户端会保存下来,保存的容器就是cookie,因此当我们完全禁掉浏览器的cookie的时候,服务端的session也会不能正常使用(对于网络上很多用php和jsp编写的网站,禁掉cookie,网站的session都无法正常的访问)。

     

    webStorage(localStroage和sessionStorage)优势:

    1,从容量上讲WebStorage一般浏览器提供5M的存储空间

    2,安全性上WebStorage 并不作为 HTTP header 发送的浏览器,所以相对安全

    3,从流量上讲,WebStorage不传送到服务器,可以节省不必要的流量

    展开全文
  • 1.存储大小:cookie 4k storage 5M 2.cookie 拥有有效期,storage永久存储 3.cookie会发送到服务器,存储在内存中,storage 只存储在浏览器端 4.cookie有路径限制,storage只存储在域名下 5.cookie没有特定的api...

    1.存储大小:cookie 4k  storage  5M

    2.cookie 拥有有效期,storage永久存储

    3.cookie会发送到服务器,存储在内存中,storage 只存储在浏览器端

    4.cookie有路径限制,storage只存储在域名下

    5.cookie没有特定的api,storage有对应的api

    sessionStorage localStorage区别:

    sessionStora在内存中存储,随着浏览器的关闭会自动关闭

    --------------------------------  

    为什么封装storage

    1.只能简单的key val

    2.只能存储字符串,需要人工转换为json

    3.只能一次性清空,不能单个清空

    封装storage

    封装思路:

    利用递归的方式创建方法,首先获取storage转换为jison对象,通过递归的方式得到想要的值

    /**
     * @description storage 封装
     */
    const STORAGE_KEY = 'xiao'
    
    // storage.setItem('a', 1)
    // storage.setItem('xiao', 100, 'user')
    // storage.setItem('user', { a: 1 })  value={a:1}
    // storage.setItem('abc', { a: 1 }, 'user')
    
    export default {
      //  JSON.stringify方法将 JavaScript 对象转换为字符串。
      setItem (key, value, moduleName) {
        if (moduleName) {
          const val = this.getItem(moduleName)
          val[key] = value
          this.setItem(moduleName, val)
        } else {
          const val = this.getStorage()
          // 添加一个字段
          val[key] = value
          window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val))
        }
      },
      // 获取摸一个模块下面的属性user下面的userName
      getItem (key, moduleName) {
        // 如果只有一个参数直接return {"user":{"a":1,"abc":{"a":1}},"a":1} key=user
        if (moduleName) {
          const val = this.getItem(moduleName)
          console.log(val, moduleName)
          if (val) return val[key]
        }
    //JSON.parse(sessionStorage.getItem('xiao'))['user'] 浏览器输入
    //{"user":{"a":1,"abc":{"a":1}},"a":1}  提前写入浏览器的值
        return this.getStorage()[key]
      },
      getStorage () {
        // 方法用来解析JSON字符串
        return JSON.parse(window.sessionStorage.getItem(STORAGE_KEY) || '{}')
      },
      clear (key, moduleName) {
        const val = this.getStorage()
        if (moduleName) {
          delete val[moduleName][key]
        } else {
          delete val[key]
        }
        window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val))
      }
    }
    

    虽然网上都是这么写的,我觉得如果你的js不太好的话还是别写递归了,直接if 判断就可以了,比较简单明了,拿getItem(key,moduleName)来说,如果只有一个参数则直接返回 this.getStorage()[key],如果有两个参数,进入if中首先执行一个参数的方法得到storage的jison对象val,{a:1,b:2}假设  然后返回 vla['a']的值为1  同理setItem也是类似的操作,就是递归的写法,而递归的出口就是它的参数

    a['user'] = {user:{a:1,b:2,c:4}}   setItem核心思想

    如果没有特别的要求可以不用封装  sessionStorage loaclStorage 公用api

    localStorage.setItem('myCat', 'Tom');
    let cat = localStorage.getItem('myCat');
    localStorage.removeItem('myCat');
    // 移除所有
    localStorage.clear();
    
    
    

    -------------简单的封装

    export default {
        setItem (key, value) {
            let storage = this.getStorage()
            storage[key] = value
            window.localStorage.setItem(config.namespace,JSON.stringify(storage))
        },
        getItem (key) {
            return this.getStorage()[key]
        },
        clearItem (key) {
            let storage = this.getStorage()
            delete storage[key]
            window.localStorage.setItem(config.namespace,JSON.stringify(storage))
        },
        clearAll () {
            window.localStorage.clear()
        },
        getStorage () {
            return JSON.parse(window.localStorage.getItem(config.namespace) || "{}")
        }
    }


     

    展开全文
  • cookie和session, cookie和webStorage区别

    千次阅读 2018-05-07 15:30:13
    服务器告诉浏览器设置一下cookie),浏览器会将cookie以key/value保存到某个目录的文本文件内,下次请求同意网站时就发送该cookie给服务器(前提是浏览器设置为启用cookiecookie通过HTTP请求报文响应报文配合完成...
  • Cookie、Local Storage和Session Storage区别 今天看了一篇公众号,里面把Cookie、Local Storage和Session Storage的关系说的很透彻,特地整理了一下如下表格。 特性 Cookie Local Storage Session Storage ...
  • Cookie和WebStorage

    2020-09-11 19:30:23
    Cookie和WebStorage (一)cookie cookie指的是服务器发送到用户浏览器并保存到本地的一小块数据,它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常,它用于被告知服务端两个请求是否来自同一...
  • web storage和cookie区别 a. Cookie的大小是受限的 b. 每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽 c. cookie还需要指定作用域,不可以跨域调用 d. Web Storage拥有setItem,getItem...
  • cookie对比storage

    2018-10-19 17:00:20
    cookie session Storage locale Storage 大小限制 4k 5m或更大 5m或更大 携带 始终在同源的http请求携带 仅在本地保存 仅在本地保存 数据有效期 在设置的cookie过期时间前有效 仅在关闭当前浏览器窗口前有效...
  • cookie、sessionStoragelocalStorage的区别 1)、数据的生命周期来看 (1)Cookie一般由服务器生成,可设置失效时间如果在浏览器端生成cookie 则默认是浏览器关闭后失效 (2)localStorage 是浏览器存储,除非...
  • cookie数据存放在客户端,session数据存放在服务器。 cookie不是很安全,别人可以分析存在本地的cookie并进行cookie欺骗,考虑安全,应当使用session session会在一定时间内保存在服务上,当访问增多,会比较占用...
  • Cookie和WebStorage区别

    2018-11-17 15:06:00
    html5中的Web Storage包括了两种存储方式:sessionStoragelocalStorage。 sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。...
  • webStorage 和cookie区别

    千次阅读 2018-11-27 17:27:39
    Cookie数量长度的限制。每个domain最多只能有20条cookie,每个cookie长度不能超过4KB 安全性问题。如果cookie被人拦截了,那人就可以取得所有的session信息。   区别:    1、cookie数据始终...
  • cookie和webstorage

    2020-12-29 21:16:48
    cookie是根据域文件夹存储的 不同的域不能相互访问对应的cookie ip端口不同不能相互访问 同一个域,子文件夹可以访问父文件夹的cookie,但是父文件夹不能访问子文件夹的cookie 顶级域不能访问子域任何cookie,...
  • 2.10 cookie-storage

    2021-01-31 19:53:05
    2.10 cookie-storage 1. cookie示例 <%-- Created by IntelliJ IDEA. User: JAVASM Date: 2020/12/4 Time: 10:35 To change this template use File | Settings | File Templates. --%> <%@ page ...
  • 一、cookie和session cookie和session的共同之处在于:cookie和...cookie和session的区别: 1.cookie数据保存在客户端,session数据保存在服务器 2.cookie不是很安全,别人可以分析存放在本地的cookie进行co...
  • 区别web storage和cookie

    2016-11-11 22:31:53
    Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。 Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽, 另外cookie还需要指定作用域,...
  • 2.cookie:http header 里的一个字段,保持一些很小的信息,会随着http req发送服务器,编程使用key:value ,可保存登录状态;...3.local storage:跟cookie差不多,编程使用的,不会发送到服务器,记录用户的一...
  • cookie与Webstorage区别

    千次阅读 2018-10-12 17:25:33
    WebStorage分为 localStorage sessionStorage。 Cookie数量长度的限制。每个domain最多只能有20条cookie,每个cookie长度不能超过4KB。...cookie与Webstorage区别: 1、存储大小不同  cookie的大小...
  • Cookie 是一些数据, 存储于你电脑上的文本文件中。数据是以键值对形式存储的。我们可以在浏览器的控制台中查看。 Storage是html5里的API,它有两个对象: localStoragesessionStorage,它们都属于window对象的属性...
  • stor封装提供了一个强大的stor方法可以让你更轻松的设置,查询删除Cookie属性,每个cookie在设置时默认通过encodeURIComponent转码,读取时再通过decodeURIComponent解码。
  • WebStorage Cookie区别

    千次阅读 2016-05-19 11:18:00
    sessionStorage localStorage 是...cookiecookie在浏览器服务器间来回传递,主要应用场景: 保持登录 保持上次查看的页面 浏览计数 广告追踪 购物车的状态保持 Cookies是如何起效的? 当浏览器从web的
  • web storage和Cookie都是用来在客户端存储数据。 web storage又分为localStragesessionStorage Cookie的弊端 每次请求时,cookie都会存放在请求头中。 请求被拦截,cookie数据会存在安全隐患。 cookie的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 26,076
精华内容 10,430
关键字:

cookie和storage区别