一、Cookie

  • 什么是Cookie

      数据存储到计算机中,通过浏览器控制添加与删除数据
  • Cookie特点

      - 存储限制: 一个域名100个Cookie,每个4kb;
      - Cookie会包含在每个HTTP请求中向服务器发送,这回导致多次发送重复数据;
      - Cookie在网络传输时并未加密,也可能会有安全隐患;
      - 页面间的Cookie是共享的;
  • 设置cookie

    // num过期时间,单位秒
    function setCookie(cname, cvalue, num){
        var d = new Date()
        d.setTime(d.getTime() + (num*1000))
        var expires = 'expires=' + d.toGMTString()
        
        document.cookie = cname + '=' + cvalue + '; ' + expires
        console.log(document.cookie)
    }
  • 获取cookie

    function getCookie(cname){
        // 多个值存储  username=atom; password=123; age=18
        var name = cname + '='
        var ca = document.cookie.split(';')
        for(var i=0; i<ca.length; i++){
            // 去除前后的空格
            var c = ca[i].trim()
            
            if(c.indexOf(name) == 0)
                return c.substring(name.length, c.length)
        }
        
        return ''
    }

二、Storage

使用Storage保存key-value时,key、value都只能是字符串(如果有复杂数据,可以将结构化数据封装成JSON,再将JSON对象转为字符串保存)。

  • sessionStorage

    - session临时会话,从页面打开到页面关闭的时间段;
    - 窗口的临时促成了,页面关闭,本地存储消失;
  • localStorage

    - 永久存储(可以手动删除数据)
  • Storage的特点

    - 存储量限制(5M);
    - 客户端完成,不会请求服务器处理;
    - sessionStorage数据是不共享、localStorage共享

三、Storage操作方法

  • setItem()

    - 设置数据,key/value类型,类型都是字符串;
    - 可以用获取属性的形式操作;
    
    window.sessionStorage.setItem('name', oText.value);
    window.localStorage.setItem('name', oText.value);
  • getItem()

    - 获取数据,通过key来获取到对对应的value;
    
    window.sessionStorage.getItem('name')
    window.localStorage.getItem('name')
  • removeItem()

    - 删除数据,通过key来删除对应的value;
     
    window.sessionStorage.removeItem('name');
    window.localStorage.removeItem('name');
  • clear()

    - 删除全部存储的值;
    
    window.sessionStorage.clear();
    window.localStorage.clear();
    > 案例: 存储注册信息(第一次没填写完关闭,当第二次打开时,之前填写的内容还是存在的)
    > 当窗口关闭时触发window.onunload = function(){}
    

四、Storage存储事件

  • storage事件

    - 当有数据修改或删除的情况下,就会触发storage事件
    - 在对数据进行改变的窗口对象是不会触发的
    - key: 修改或删除的key,如果调用clear(),key为null
    - newValue: 新设置的值,如果调用removeStorage(),key为null
    - oldValue: 调用改变前的value值
    - storageArea: 当前的storage对象
    - url: 触发这个改变事件页面的url
    - sessionStorage在同窗口下才可以,例如iframe操作就是同窗口的操作;
    
    // 添加storage事件
    window.addEventListener('storage', function(ev){
       ev = ev || window.event;
       console.log('key:' + ev.key);
       console.log('newValue:' + ev.newValue);
       console.log('oldValue:' + ev.oldValue);
       console.log('storageArea:' + ev.storageArea);
       console.log('url:' + ev.url);        
    });
    > 案例: 同步购物车(不管哪个页面操作了,但都是同步的)
    

五、离线缓存策略

1、localStorage, sessionStorage(字符串键值对在本地存储数据,方便灵活,但是对于大量结构化数据存储力不从心)
2、indexedDB (浏览器中持久地存储结构化数据的数据库)
3、web sql(已经被废弃)
4、application cache (完全离线资源缓存,加载更快 降低服务器负载,单地址页面对实时性要求不要的业务 离线web应用)

之前会使用cookies,每次的http请求头中,都会带有cookies——缺点;每个域名只能存储4K大小的cookies;主域名污染: 如果我们使用cookies存储主域名的东西,那么子域名下得Http请求都会带上主域名的东西;如果关联上网络,那么将带来安全问题。
所以,通常我们会使用cookies用在如购物车、身份验证等问题上。

本文由 zyz 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

楼主残忍的关闭了评论