奥门新浦京官方网站HTML5本地存储Localstorage

结语

localstorage是移动开发必不可少的技术点,需要深入了解,具体业务代码后续会放到git上,有兴趣的朋友可以去了解

           (3)第二次启动session_start后,前一次的sessionID就是失效了,session过期后,sessionID也随之失效。

优缺点:

基础知识

localstorage存储对象分为两种:

① sessionStrage:
session即会话的意思,在这里的session是指用户浏览某个网站时,从进入网站到关闭网站这个时间段,session对象的有效期就只有这么长。

② localStorage:
将数据保存在客户端硬件设备上,不管它是什么,意思就是下次打开计算机时候数据还在。

两者区别就是一个作为临时保存,一个长期保存。

这里来一段简单的代码说明其基本使用:

<div id="msg" style="margin: 10px 0; border: 1px solid black; padding: 10px; width: 300px;
  height: 100px;">
</div>
<input type="text" id="text" />
<select id="type">
  <option value="session">sessionStorage</option>
  <option value="local">localStorage</option>
</select>
<button onclick="save();">
  保存数据</button>
<button onclick="load();">
  读取数据</button>
<script type="text/javascript">
  var msg = document.getElementById('msg'),
            text = document.getElementById('text'),
            type = document.getElementById('type');

  function save() {
    var str = text.value;
    var t = type.value;
    if (t == 'session') {
      sessionStorage.setItem('msg', str);
    } else {
      localStorage.setItem('msg', str);
    }
  }

  function load() {
    var t = type.value;
    if (t == 'session') {
      msg.innerHTML = sessionStorage.getItem('msg');
    } else {
      msg.innerHTML = localStorage.getItem('msg');
    }
  }
</script>

2、使用方式:

用法:

真实场景

实际工作中对localstorage的使用一般有以下需求:

① 缓存一般信息,如搜索页的出发城市,达到城市,非实时定位信息

② 缓存城市列表数据,这个数据往往比较大


每条缓存信息需要可追踪,比如服务器通知城市数据更新,这个时候在最近一次访问的时候要自动设置过期

④ 每条信息具有过期日期状态,在过期外时间需要由服务器拉取数据

⑤ ……

define([], function () {

  var Storage = _.inherit({
    //默认属性
    propertys: function () {

      //代理对象,默认为localstorage
      this.sProxy = window.localStorage;

      //60 * 60 * 24 * 30 * 1000 ms ==30天
      this.defaultLifeTime = 2592000000;

      //本地缓存用以存放所有localstorage键值与过期日期的映射
      this.keyCache = 'SYSTEM_KEY_TIMEOUT_MAP';

      //当缓存容量已满,每次删除的缓存数
      this.removeNum = 5;

    },

    assert: function () {
      if (this.sProxy === null) {
        throw 'not override sProxy property';
      }
    },

    initialize: function (opts) {
      this.propertys();
      this.assert();
    },

    /*
    新增localstorage
    数据格式包括唯一键值,json字符串,过期日期,存入日期
    sign 为格式化后的请求参数,用于同一请求不同参数时候返回新数据,比如列表为北京的城市,后切换为上海,会判断tag不同而更新缓存数据,tag相当于签名
    每一键值只会缓存一条信息
    */
    set: function (key, value, timeout, sign) {
      var _d = new Date();
      //存入日期
      var indate = _d.getTime();

      //最终保存的数据
      var entity = null;

      if (!timeout) {
        _d.setTime(_d.getTime() + this.defaultLifeTime);
        timeout = _d.getTime();
      }

      //
      this.setKeyCache(key, timeout);
      entity = this.buildStorageObj(value, indate, timeout, sign);

      try {
        this.sProxy.setItem(key, JSON.stringify(entity));
        return true;
      } catch (e) {
        //localstorage写满时,全清掉
        if (e.name == 'QuotaExceededError') {
          //            this.sProxy.clear();
          //localstorage写满时,选择离过期时间最近的数据删除,这样也会有些影响,但是感觉比全清除好些,如果缓存过多,此过程比较耗时,100ms以内
          if (!this.removeLastCache()) throw '本次数据存储量过大';
          this.set(key, value, timeout, sign);
        }
        console && console.log(e);
      }
      return false;
    },

    //删除过期缓存
    removeOverdueCache: function () {
      var tmpObj = null, i, len;

      var now = new Date().getTime();
      //取出键值对
      var cacheStr = this.sProxy.getItem(this.keyCache);
      var cacheMap = [];
      var newMap = [];
      if (!cacheStr) {
        return;
      }

      cacheMap = JSON.parse(cacheStr);

      for (i = 0, len = cacheMap.length; i < len; i++) {
        tmpObj = cacheMap[i];
        if (tmpObj.timeout < now) {
          this.sProxy.removeItem(tmpObj.key);
        } else {
          newMap.push(tmpObj);
        }
      }
      this.sProxy.setItem(this.keyCache, JSON.stringify(newMap));

    },

    removeLastCache: function () {
      var i, len;
      var num = this.removeNum || 5;

      //取出键值对
      var cacheStr = this.sProxy.getItem(this.keyCache);
      var cacheMap = [];
      var delMap = [];

      //说明本次存储过大
      if (!cacheStr) return false;

      cacheMap.sort(function (a, b) {
        return a.timeout - b.timeout;
      });

      //删除了哪些数据
      delMap = cacheMap.splice(0, num);
      for (i = 0, len = delMap.length; i < len; i++) {
        this.sProxy.removeItem(delMap[i].key);
      }

      this.sProxy.setItem(this.keyCache, JSON.stringify(cacheMap));
      return true;
    },

    setKeyCache: function (key, timeout) {
      if (!key || !timeout || timeout < new Date().getTime()) return;
      var i, len, tmpObj;

      //获取当前已经缓存的键值字符串
      var oldstr = this.sProxy.getItem(this.keyCache);
      var oldMap = [];
      //当前key是否已经存在
      var flag = false;
      var obj = {};
      obj.key = key;
      obj.timeout = timeout;

      if (oldstr) {
        oldMap = JSON.parse(oldstr);
        if (!_.isArray(oldMap)) oldMap = [];
      }

      for (i = 0, len = oldMap.length; i < len; i++) {
        tmpObj = oldMap[i];
        if (tmpObj.key == key) {
          oldMap[i] = obj;
          flag = true;
          break;
        }
      }
      if (!flag) oldMap.push(obj);
      //最后将新数组放到缓存中
      this.sProxy.setItem(this.keyCache, JSON.stringify(oldMap));

    },

    buildStorageObj: function (value, indate, timeout, sign) {
      var obj = {
        value: value,
        timeout: timeout,
        sign: sign,
        indate: indate
      };
      return obj;
    },

    get: function (key, sign) {
      var result, now = new Date().getTime();
      try {
        result = this.sProxy.getItem(key);
        if (!result) return null;
        result = JSON.parse(result);

        //数据过期
        if (result.timeout < now) return null;

        //需要验证签名
        if (sign) {
          if (sign === result.sign)
            return result.value;
          return null;
        } else {
          return result.value;
        }

      } catch (e) {
        console && console.log(e);
      }
      return null;
    },

    //获取签名
    getSign: function (key) {
      var result, sign = null;
      try {
        result = this.sProxy.getItem(key);
        if (result) {
          result = JSON.parse(result);
          sign = result && result.sign
        }
      } catch (e) {
        console && console.log(e);
      }
      return sign;
    },

    remove: function (key) {
      return this.sProxy.removeItem(key);
    },

    clear: function () {
      this.sProxy.clear();
    }
  });

  Storage.getInstance = function () {
    if (this.instance) {
      return this.instance;
    } else {
      return this.instance = new this();
    }
  };

  return Storage;

});

这段代码包含了localstorage的基本操作,并且对以上问题做了处理,而真实的使用还要再抽象:

define(['AbstractStorage'], function (AbstractStorage) {

  var Store = _.inherit({
    //默认属性
    propertys: function () {

      //每个对象一定要具有存储键,并且不能重复
      this.key = null;

      //默认一条数据的生命周期,S为秒,M为分,D为天
      this.lifeTime = '30M';

      //默认返回数据
      //      this.defaultData = null;

      //代理对象,localstorage对象
      this.sProxy = new AbstractStorage();

    },

    setOption: function (options) {
      _.extend(this, options);
    },

    assert: function () {
      if (this.key === null) {
        throw 'not override key property';
      }
      if (this.sProxy === null) {
        throw 'not override sProxy property';
      }
    },

    initialize: function (opts) {
      this.propertys();
      this.setOption(opts);
      this.assert();
    },

    _getLifeTime: function () {
      var timeout = 0;
      var str = this.lifeTime;
      var unit = str.charAt(str.length - 1);
      var num = str.substring(0, str.length - 1);
      var Map = {
        D: 86400,
        H: 3600,
        M: 60,
        S: 1
      };
      if (typeof unit == 'string') {
        unit = unit.toUpperCase();
      }
      timeout = num;
      if (unit) timeout = Map[unit];

      //单位为毫秒
      return num * timeout * 1000 ;
    },

    //缓存数据
    set: function (value, sign) {
      //获取过期时间
      var timeout = new Date();
      timeout.setTime(timeout.getTime() + this._getLifeTime());
      this.sProxy.set(this.key, value, timeout.getTime(), sign);
    },

    //设置单个属性
    setAttr: function (name, value, sign) {
      var key, obj;
      if (_.isObject(name)) {
        for (key in name) {
          if (name.hasOwnProperty(key)) this.setAttr(k, name[k], value);
        }
        return;
      }

      if (!sign) sign = this.getSign();

      //获取当前对象
      obj = this.get(sign) || {};
      if (!obj) return;
      obj[name] = value;
      this.set(obj, sign);

    },

    getSign: function () {
      return this.sProxy.getSign(this.key);
    },

    remove: function () {
      this.sProxy.remove(this.key);
    },

    removeAttr: function (attrName) {
      var obj = this.get() || {};
      if (obj[attrName]) {
        delete obj[attrName];
      }
      this.set(obj);
    },

    get: function (sign) {
      var result = [], isEmpty = true, a;
      var obj = this.sProxy.get(this.key, sign);
      var type = typeof obj;
      var o = { 'string': true, 'number': true, 'boolean': true };
      if (o[type]) return obj;

      if (_.isArray(obj)) {
        for (var i = 0, len = obj.length; i < len; i++) {
          result[i] = obj[i];
        }
      } else if (_.isObject(obj)) {
        result = obj;
      }

      for (a in result) {
        isEmpty = false;
        break;
      }
      return !isEmpty ? result : null;
    },

    getAttr: function (attrName, tag) {
      var obj = this.get(tag);
      var attrVal = null;
      if (obj) {
        attrVal = obj[attrName];
      }
      return attrVal;
    }

  });

  Store.getInstance = function () {
    if (this.instance) {
      return this.instance;
    } else {
      return this.instance = new this();
    }
  };

  return Store;
});

我们真实使用的时候是使用store这个类操作localstorage,代码结束简单测试:

奥门新浦京官方网站 1

奥门新浦京官方网站 2

存储完成,以后都不会走请求,于是今天的代码基本结束 ,最后在android
Hybrid中有一后退按钮,此按钮一旦按下会回到上一个页面,这个时候里面的localstorage可能会读取失效!一个简单不靠谱的解决方案是在webapp中加入:

window.onunload = function () { };//适合单页应用,不要问我为什么,我也不知道

浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟服务端进行数据交互。

奥门新浦京官方网站 3

什么是localstorage

前几天在老项目中发现有对cookie的操作觉得很奇怪,咨询下来是要缓存一些信息,以避免在URL上面传递参数,但没有考虑过cookie会带来什么问题:

① cookie大小限制在4k左右,不适合存业务数据
② cookie每次随HTTP事务一起发送,浪费带宽

我们是做移动项目的,所以这里真实适合使用的技术是localstorage,localstorage可以说是对cookie的优化,使用它可以方便在客户端存储数据,并且不会随着HTTP传输,但也不是没有问题:

① localstorage大小限制在500万字符左右,各个浏览器不一致
② localstorage在隐私模式下不可读取
③ localstorage本质是在读写文件,数据多的话会比较卡(firefox会一次性将数据导入内存,想想就觉得吓人啊)
④ localstorage不能被爬虫爬取,不要用它完全取代URL传参

瑕不掩瑜,以上问题皆可避免,所以我们的关注点应该放在如何使用localstorage上,并且是如何正确使用。

           (4)sessionID是加密的

interface Storage{   readonly attribute unsigned long length;   getter DOMString key(in unsigned long index);   getter any getItem(in DOMString key,in any data);   deleter void removeItem(in DOMString key);   void clear();  } 

localstorage的使用

  (1)网上商城中的购物车

简单的设置或获取cookie

           (2)sessionID是要有人登录,或者启动session_start才会有,所以攻破cookie也不一定能得到sessionID;

 一张表包含了用 “AUTOINCREMENT” 修饰的列时, sqlite 将自动创建表
“SQLITE_SEQUENCE”。如果想清空记录,让编号归0,直接处理sqlite_sequence就可以了。

7、缺点:cookie:(1)大小受限

奥门新浦京官方网站 4

WebStorage的优点:

(1)存储空间更大:cookie为4KB,而WebStorage是5MB;

(2)节省网络流量:WebStorage不会传送到服务器,存储在本地的数据可以直接获取,也不会像cookie一样每次请求都会传送到服务器,所以减少了客户端和服务器端的交互,节省了网络流量;

(3)对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据,sessionStorage会非常方便;

(4)快速显示:有的数据存储在WebStorage上,再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多,所以速度更快;

(5)安全性:WebStorage不会随着HTTP
header发送到服务器端,所以安全性相对于cookie来说比较高一些,不会担心截获,但是仍然存在伪造问题;

(6)WebStorage提供了一些方法,数据操作比cookie方便;

    setItem (key, value) ——  保存数据,以键值对的方式储存信息。

         getItem (key) ——
 获取数据,将键值传入,即可获取到对应的value值。

          removeItem (key) ——  删除单个数据,根据键值移除对应的信息。

          clear () ——  删除所有的数据

          key (index) —— 获取某个索引的key

2.transaction:允许用户根据情况控制事务提交或回滚。完整定义:

(5)每次访问都要传送cookie给服务器,浪费带宽。

IndexedDB

进行实现;API对encodeURL的结束为,当浏览器支持Cookie时,url不做任何处理;当浏览器不支持Cookie的时候,将会重写URL将SessionID拼接到访问地址后。

HTML5本地存储:

session:(1)Session保存的东西越多,就越占用服务器内存,对于用户在线人数较多的网站,服务器的内存压力会比较大。

var db=openDatabase("myDb","0.1","A list of to do items",20000)

  (3)将某些数据放入session中,供同一用户的不同页面使用

 

        (3)创建Session变量有很大的随意性,可随时调用,不需要开发者做精确地处理,所以,过度使用session变量将会导致代码不可读而且不好维护。

 

4、存储内容类型:localStorage和sessionStorage只能存储字符串类型,对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

缺点:

WebStorage的目的是克服由cookie所带来的一些限制,当数据需要被严格控制在客户端时,不需要持续的将数据发回服务器。

Web Storage

    (3)保存上次查看的页面

使用异步 API 方法调用完后会立即返回,而不会阻塞调用线程。

奥门新浦京官方网站 5

奥门新浦京官方网站 6

4、存储的大小:cookie:单个cookie保存的数据不能超过4kb;session大小没有限制。

 

HTML5的WebStorage提供了两种API:localStorage(本地存储)和sessionStorage(会话存储)。

Cookie是HTML4中在客户端存储简单用户信息的一种方式,它的应用很多所以有必要回顾一下。它使用文本来存储信息,当有应用程序使用cookie时,服务器端就会发送cookie到客户端。客户端浏览器将保存该信息。下一次页面请求时,客户端浏览器就会把cookie发送到服务器。 

           (5)综上所述,攻击者必须在短时间内攻破加密的sessionID,这很难。

2、内容不会发送到服务器。

区别:

文档中的示例:

sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念,sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面,sessionStorage也是不一样的。

HTML5 中的Web
Storage提供了两种在客户端存储数据的方法,即localStorage和sessionstorage。

5、获取方式:localStorage:window.localStorage;;sessionStorage:window.sessionStorage;。

 function setCookie(name, value, expiredays) {               var date = new Date();               date.setDate(date.getDate() + expiredays);               document.cookie = name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + date.toGMTString());           }           setCookie('username', 'Darren', 30);           function getCookie(name) {               if (document.cookie.length > 0) {                   var start = document.cookie.indexOf(name + "=");  //通过String对象的indexOf()来检查这个cookie是否存在,不存在就为 -1                     if (start != -1) {                       start = start + name.length + 1; //最后这个+1其实就是表示"="号啦,这样就获取到了cookie值的开始位置                    var end = document.cookie.indexOf(";", start);// indexOf()第二个参数表示指定的开始索引的位置                        if (end == -1) end = document.cookie.length;                       return unescape(document.cookie.substring(start, end)); //通过substring()得到了值。想了解unescape()得先知道escape()是做什么的,都是很重要的基础                    }               }               return "";           }

1、生命周期:localStorage:localStorage的生命周期是永久的,关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据,否则数据永远不会消失。

 function initdb() {              var name = ['C#', "C++", "C", "JavaScript", "Java", "PhP"];              db.transaction(function(tx) {                  tx.executeSql('Create table if not exists mytable(id integer primary key autoincrement,name)');                  for (var i = 0; i < name.length; i++) {                      tx.executeSql('insert into mytable(name) values(?)', [name[i]]);                  }              });          }      initdb();

        (2)用户可以操作(禁用)cookie,使功能受限

实例:

3、存储内容:cookie只能保存字符串类型,以文本的方式;session通过类似与Hashtable的数据结构来保存,能支持任何类型的对象(session中可含有多个对象)

  window.sessionStorage.setItem('mykey', 'niqiu');    window.sessionStorage.nikey = 'stone';    alert(window.sessionStorage.getItem('mykey'));    alert(window.sessionStorage.nikey);

    (4)浏览计数

 var request = indexedDB.open("library");          request.onupgradeneeded = function () {              // The database did not previously exist, so create object stores and indexes.              var db = request.result;              var store = db.createObjectStore("books", { keyPath: "isbn" });              var titleIndex = store.createIndex("by_title", "title", { unique: true });              var authorIndex = store.createIndex("by_author", "author");                // Populate with initial data.              store.put({ title: "Quarry Memories", author: "Fred", isbn: 123456 });              store.put({ title: "Water Buffaloes", author: "Fred", isbn: 234567 });              store.put({ title: "Bedrock Nights", author: "Barney", isbn: 345678 });          };            request.onsuccess = function () {              db = request.result;          };

    (2)保存上次登录的时间等信息。

缺点:

  (4)防止用户非法登录

View Code

3、存储位置:localStorage和sessionStorage都保存在客户端,不与服务器进行交互通信。

1.使用简单文本存储数据,所以cookie的安全性很差。cookie保存在客户端浏览器,很容易被客户端盗取。

        (6)cookie数据有路径(path)的概念,可以限制cookie只属于某个路径下。

Cookie

(1)cookie机制:如果不在浏览器中设置过期时间,cookie被保存在内存中,生命周期随浏览器的关闭而结束,这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间,cookie被保存在硬盘中,关闭浏览器后,cookie数据仍然存在,直到过期时间结束才消失。

浏览器
说明
IE
不支持
FireFox
不支持
Opera
10.5及以上支持
Chrome
3.0及以上支持
Safari
3.2及以上支持。

        (2)依赖于cookie(sessionID保存在cookie),如果禁用cookie,则要使用URL重写,不安全

function errorHandler(transaction,errmsg){}

1、保持状态:cookie保存在浏览器端,session保存在服务器端

Web SQL

  (2)保存用户登录信息

奥门新浦京官方网站 7

   
 Cookie是服务器发给客户端的特殊信息,cookie是以文本的方式保存在客户端,每次请求时都带上它

localstorage是用于持久化的本地存储,除非主动删除数据,负责数据是永远不会过期的。localstorage的机制和Cookie相似,都是key-value的形式存储,对I/O进行操作;sessionstorage是将数据保存在session对象中,用户关闭浏览器,数据就会删除。不是一种持久化的本地存储,仅仅是会话级别的存储。

      原因如下:(1)sessionID存储在cookie中,若要攻破session首先要攻破cookie;

 

一、cookie和session

 

WebStorage两个主要目标:(1)提供一种在cookie之外存储会话数据的路径。(2)提供一种存储大量可以跨会话存在的数据的机制。

实例:

session:Session用于保存每个用户的专用信息,变量的值保存在服务器端,通过SessionID来区分不同的客户。

优缺点

2、存储大小:localStorage和sessionStorage的存储数据大小一般都是:5MB

奥门新浦京官方网站 8奥门新浦京官方网站 9

6、应用场景:

这样就创建了一个数据库。

        (4)有些状态不可能保存在客户端。

transaction.executeSql(sqlquery,[],dataHandler,errorHandler):

        (3)安全性较低

奥门新浦京官方网站 10

cookie:(1)判断用户是否登陆过网站,以便下次登录时能够实现自动登录(或者记住密码)。如果我们删除cookie,则每次登录必须从新填写登录的相关信息。

 db.transaction(function(tx) {              tx.executeSql('create table if not exists t1(id unique,log)');              tx.executeSql('insert into t1(id,log) values(1,"created a db")');              tx.executeSql('insert into t1(id,log) values(1,"a good day")');              tx.executeSql('insert into t1(id,log) values(1,"hello")');          });    //读取:  db.transaction(function(tx) {              tx.executeSql('select * from t1', [], function(tx, results) {                  var len = results.rows.length, i;                  var msg = "<p>共有" + len + "条记录</p>";                  document.getElementById("res").innerHTML = msg;                  for (i = 0; i < len; i++) {                      msg = "<p><b>" + results.rows.item(i).log + "</b></p>";                      document.querySelector('#res').innerHTML += msg;                  }              },null);          });

5、安全性:cookie:针对cookie所存在的攻击:Cookie欺骗,Cookie截获;session的安全性大于cookie。

Database openDatabase(in DOMString name,in DOMString version,in DOMString displayName,in unsigned long estimatedSize,in optional DatabaseCallback creationCallback)

6、应用场景:localStoragese:常用于长期登录(+判断用户是否已登录),适合长期保存在本地的数据。sessionStorage:敏感账号一次性登录;

2.本地数据未加密而且永远不会过期,极易造成隐私泄露。

二、WebStorage

 

cookie和session都是用来跟踪浏览器用户身份的会话方式。


(2)session机制:当服务器收到请求需要创建session对象时,首先会检查客户端请求中是否包含sessionid。如果有sessionid,服务器将根据该id返回对应session对象。如果客户端请求中没有sessionid,服务器会创建新的session对象,并把sessionid在本次响应中返回给客户端。通常使用cookie方式存储sessionid到客户端,在交互中浏览器按照规则将sessionid发送给服务器。如果用户禁用cookie,则要使用URL重写,可以通过response.encodeURL(url)

更详细的操作我这里也不赘述了,功能比较强大,支持group,filter等大家可以去看下面两篇文章。

浏览器支持度:

1、简答易用。

脚本用法:

View Code

transaction.executeSql("Update people set age-? where name=?;",[age,name]);

3.cookie存储的数量有限,多数浏览器上限为30或50个,ie6只支持每个域名存储20个cookie。

2.Cookie的存储数据容量有限。上限为4kb。

3.executeSql:用于执行真实的SQL查询。

奥门新浦京官方网站 11奥门新浦京官方网站 12

1、IE8下,每个独立的存储空间为10M,其他浏览器略有不同,但有比cookie要大很多。

sqlquery
为要执行的sql语句,[]这个数组表示sql语句中使用的参数数组。所有参数先用?号代替。然后依次将这些参数放在这个数组中。

jQuery.cookie = function(name, value, options) {      if (typeof value != 'undefined') { // name and value given, set cookie          options = options || {};          if (value === null) {              value = '';              options.expires = -1;          }          var expires = '';          if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {              var date;              if (typeof options.expires == 'number') {                  date = new Date();                  date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));              } else {                  date = options.expires;              }              expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE          }          var path = options.path ? '; path=' + options.path : '';          var domain = options.domain ? '; domain=' + options.domain : '';          var secure = options.secure ? '; secure' : '';          document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');      } else { // only name given, get cookie          var cookieValue = null;          if (document.cookie && document.cookie != '') {              var cookies = document.cookie.split(';');              for (var i = 0; i < cookies.length; i++) {                  var cookie = jQuery.trim(cookies[i]);                  // Does this cookie string begin with the name we want?                  if (cookie.substring(0, name.length + 1) == (name + '=')) {                      cookieValue = decodeURIComponent(cookie.substring(name.length + 1));                      break;                  }              }          }          return cookieValue;      }  };

3、浏览器自动管理不同站点的cookie。

5.cookie不适合大量数据的存储,因为cookie会由每个对服务器的请求来传递,从而造成cookie速度缓慢效率低下。

PS:这里讲web存储,主要是在客户端存储的一些技术:cookie,localstorage,sessionstorage,WebSQL。
 

奥门新浦京官方网站 13

HTML5 数据库API主要包括3个核心方法

IndexedDB很像Nosql。能够存储可观的结构化数据,一个单独的数据库项目的大小没有限制。然而可能会限制每个
IndexedDB
数据库的大小。这个限制(以及用户界面对它进行断言的方式)在各个浏览器上也可能有所不同。比如Firefox4中一个站点超过50M,Firefox会向用户请求权限。在移动端是5M.

 

 将一段Json存入localstorage:

1.浏览器会为每个域分配独立的存储空间。域A是无法访问到域B的存储空间。

两者实现的接口相同。

 $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'cnblogs.com'});//设置  var cc = $.cookie('the_cookie');//获取    $.cookie('the_cookie', null);//删除

而第三个参数表示执行成功时调用的回调函数。

第四个参数是SQL执行出错时的回调函数

IndexedDatabase API  

function dataHandler(transaction,errmsg){}
var data = new Object();          data.name = "stoneniqiu";          data.age = "26";          var str = JSON.stringify(data);          localStorage.setItem(data.name, str);            function getstone() {              var raw = localStorage.getItem("stoneniqiu");              var data = JSON.parse(raw);              alert(data.name + data.age);          }          getstone();

 

1.openDatabase:使用现有数据库或创建新数据库的方式创建数数据库对象。

也有Jquery.cookie.js可以用

参数名称不言而喻 脚本用法:

db.transaction(function(tx){})

用LS存储用户的操作记录,个性化的代码片段。对于性能和使用范围可以看看这篇文章: 让我们再谈谈浏览器资源加载优化

4.如果浏览器的安全配置为最高,cookie将失效。

小结:

 

2、浏览器负责发送数据。

本地存储方式比较多,一般的需求还是做一些个性化的存储。cookie和LS都是不错的选择,但是如果要支持离线,存储的数据可能就需要用到IndexedDb这样的存储方式了。

 Web SQL Database 允许应用通过一个异步JavaScript接口访问SQLLite
数据库,但IE,Firefox并没有实现它,而且WHATWG也停止对Web Sql
Database的开发。由于标准认定直接执行SQL语句不可取,Web Sql database
已经被索引数据库(Indexed Database)所取代。

3、更多丰富易用的接口,使得数据的操作更为简便。

奥门新浦京官方网站 14

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注