{"id":170129,"date":"2013-03-11T13:18:03","date_gmt":"2013-03-11T09:18:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=170129"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=170129","title":{"rendered":"\u041a\u0430\u0440\u0442\u044b \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0431\u0435\u0437 \u0441\u0435\u0442\u0438: open source \u043d\u0430\u043d\u043e\u0441\u0438\u0442 \u043e\u0442\u0432\u0435\u0442\u043d\u044b\u0439 \u0443\u0434\u0430\u0440<\/span>"},"content":{"rendered":"
\t\u041a\u0430\u043a-\u0442\u043e \u0434\u0430\u0432\u043d\u043e \u044f \u043f\u0438\u0441\u0430\u043b \u043e \u0442\u043e\u043c \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0432 \u0432\u0435\u0431\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u044b \u0431\u0435\u0437 \u0441\u0435\u0442\u0438<\/a> \u0438 \u043f\u044b\u0442\u0430\u043b\u0441\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0433\u0443\u0433\u043b\u043e \u043a\u0430\u0440\u0442. \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u0435\u0449\u0430\u043b\u0438 \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0441\u0443\u0440\u0441\u044b, \u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u043c\u043d\u043e\u044e \u043a\u043e\u0434 \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u0441 localstorage<\/code>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0440\u0435\u0448\u0438\u043b \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430 \u0441\u0432\u0435\u0442\u043b\u0443\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u0441\u0438\u043b\u044b, \u0433\u0434\u0435 \u043a\u043e\u0434 \u043e\u0442\u043a\u0440\u044b\u0442, \u043f\u0440\u043e\u0441\u0442 \u0438 \u043f\u043e\u043d\u044f\u0442\u0435\u043d.<\/a><\/p>\n

\u0427\u0435\u0433\u043e \u0436\u0435 \u044f \u0445\u043e\u0447\u0443?<\/h4>\n

\u042f \u0445\u043e\u0447\u0443 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u044b \u0434\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0431\u0435\u0437 \u0441\u0435\u0442\u0438, \u0442\u0435 \u0432 \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0448\u044c \u043a\u0430\u0440\u0442\u0443, \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0448\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u044e\u0449\u0438\u0435 \u0442\u0430\u0439\u043b\u044b (\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0431\u0443\u0434\u0443\u0442 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f) \u0438 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0440\u0430\u0437 \u043a\u0430\u0440\u0442\u0430 \u0441 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u044b\u043c\u0438 \u0442\u0430\u0439\u043b\u0430\u043c\u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u0431\u0435\u0437 \u0441\u0435\u0442\u0438.<\/p>\n

\u0412 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u043b\u0435\u0442\u0443 \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0438 \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0438 \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0440\u0435\u0433\u0438\u043e\u043d\u0430. \u041d\u043e \u044f \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u0445\u043e\u0447\u0443 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u043e\u0434\u0445\u043e\u0434.<\/p>\n

\u0427\u0442\u043e \u0436\u0435 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c?<\/h4>\n

\u0412 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u043c \u0432\u0435\u0431\u0435 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043d\u0430\u0448\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u0434\u043e\u0439\u0442\u0438:
Application Cache<\/a> \u2014 \u0434\u043b\u044f \u0441\u0442\u0430\u0442\u0438\u043a\u0438, \u043d\u043e \u043d\u0435 \u0434\u043b\u044f \u0442\u0430\u0439\u043b\u043e\u0432.
Local Storage<\/a> \u2014 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c base64 data uri, \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u0435\u0437\u0434\u0435, \u043d\u043e \u043e\u0447\u0435\u043d\u044c \u043c\u0430\u043b\u043e \u043c\u0435\u0441\u0442\u0430.
Indexed DB<\/a> \u2014 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 base64 data uri, \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0445 \u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0445\u0440\u043e\u043c\u0435, ff, ie10.
Web SQL<\/a> \u2014 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 base64 data uri, \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e, \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d \u043a\u0430\u043a \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0439, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0445 \u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0445\u0440\u043e\u043c\u0435, \u0441\u0430\u0444\u0430\u0440\u0438, \u043e\u043f\u0435\u0440\u0435, \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0430\u043d\u0434\u0440\u043e\u0438\u0434\u0430.
File Writer<\/a> \u2014 \u0442\u043e\u043b\u044c\u043a\u043e \u0445\u0440\u043e\u043c.<\/p>\n

\u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u043b\u043e\u0431\u044b<\/a> \u0438 \u0431\u043b\u043e\u0431 \u0443\u0440\u043b\u044b<\/a> \u0434\u043b\u044f \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u044f \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u043c\u043e\u0433\u043e \u0442\u0430\u0439\u043b\u0430\u043c\u0438 \u043c\u0435\u0441\u0442\u0430, \u043d\u043e \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 Indexed DB<\/a>. \u042d\u0442\u0443 \u0437\u0430\u0442\u0435\u044e \u044f \u043f\u043e\u043a\u0430 \u043e\u0441\u0442\u0430\u0432\u043b\u044e.<\/p>\n

\u0418\u0442\u0430\u043a, \u0435\u0441\u043b\u0438 \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c Application Cache<\/a>, Indexed DB<\/a> \u0438 Web SQL<\/a>, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0448\u0438\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0443 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0442\u0430\u0439\u043b\u043e\u0432 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u0443\u044e \u0434\u043b\u044f \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445.<\/p>\n

\u0422\u0435\u043e\u0440\u0438\u044f<\/h4>\n

\u0412 \u0442\u0435\u043e\u0440\u0438\u0438 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e: <\/p>\n

    \n
  1. \u0432\u0437\u044f\u0442\u044c API;<\/li>\n
  2. \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u0441\u044e \u0441\u0442\u0430\u0442\u0438\u043a\u0443 \u0432 Application Cache;<\/li>\n
  3. \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u043b\u043e\u0439 \u0442\u0430\u0439\u043b\u043e\u0432 \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u043b \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u043d\u0430\u0448\u0438\u0445 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449;<\/li>\n
  4. \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u043f\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0442\u0430\u0439\u043b\u043e\u0432 \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430.<\/li>\n<\/ol>\n

    <\/p>\n

    \u0425\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435<\/h4>\n

    \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0443\u0435\u043c key-value \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0441 \u0431\u0430\u0437\u043e\u0432\u044b\u043c\u0438 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f\u043c\u0438 add, delete, get \u0434\u043b\u044f Indexed DB \u0438 Web SQL. \u0417\u0434\u0435\u0441\u044c \u0435\u0441\u0442\u044c \u043e\u0434\u043d\u0430 \u043c\u0430\u0433\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f emr.fire('storageLoaded', storage);<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u043f\u0440\u043e\u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0438 \u0433\u043e\u0442\u043e\u0432\u043e \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e, \u0447\u0442\u043e\u0431\u044b \u043a\u0430\u0440\u0442\u0430 \u043d\u0435 \u043f\u0430\u0434\u0430\u043b\u0430 \u043f\u0440\u0438 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0438 \u043a \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0443.<\/p>\n

    \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Indexed DB<\/b><\/p>\n
    \n
    var getIndexedDBStorage = function () {     var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;      var IndexedDBImpl = function () {         var self = this;         var db = null;         var request = indexedDB.open('TileStorage');          request.onsuccess = function() {             db = this.result;             emr.fire('storageLoaded', self);         };          request.onerror = function (error) {             console.log(error);         };          request.onupgradeneeded = function () {             var store = this.result.createObjectStore('tile', { keyPath: 'key'});             store.createIndex('key', 'key', { unique: true });         };          this.add = function (key, value) {             var transaction = db.transaction(['tile'], 'readwrite');             var objectStore = transaction.objectStore('tile');             objectStore.put({key: key, value: value});         };          this.delete = function (key) {             var transaction = db.transaction(['tile'], 'readwrite');             var objectStore = transaction.objectStore('tile');             objectStore.delete(key);         };          this.get = function (key, successCallback, errorCallback) {             var transaction = db.transaction(['tile'], 'readonly');             var objectStore = transaction.objectStore('tile');             var result = objectStore.get(key);             result.onsuccess = function () {                 successCallback(this.result ? this.result.value : undefined);             };             result.onerror = errorCallback;         };     };      return indexedDB ? new IndexedDBImpl() : null; }; <\/code><\/pre>\n
      <\/div>\n<\/div>\n
      <\/p>\n
    \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Web SQL<\/b><\/p>\n
    \n
    var getWebSqlStorage = function () {     var openDatabase = window.openDatabase;      var WebSqlImpl = function () {         var self = this;         var db = openDatabase('TileStorage', '1.0', 'Tile Storage', 5 * 1024 * 1024);         db.transaction(function (tx) {             tx.executeSql('CREATE TABLE IF NOT EXISTS tile (key TEXT PRIMARY KEY, value TEXT)', [], function () {                 emr.fire('storageLoaded', self);             });         });          this.add = function (key, value) {             db.transaction(function (tx) {                 tx.executeSql('INSERT INTO tile (key, value) VALUES (?, ?)', [key, value]);             });         };          this.delete = function (key) {             db.transaction(function (tx) {                 tx.executeSql('DELETE FROM tile WHERE key = ?', [key]);             });         };          this.get = function (key, successCallback, errorCallback) {             db.transaction(function (tx) {                 tx.executeSql('SELECT value FROM tile WHERE key = ?', [key], function (tx, result) {                     successCallback(result.rows.length ? result.rows.item(0).value : undefined);                 }, errorCallback);             });         };     };      return openDatabase ? new WebSqlImpl() : null; }; <\/code><\/pre>\n
      <\/div>\n<\/div>\n
      <\/p>\n
    \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430<\/b><\/p>\n
    \n
    var storage =  getIndexedDBStorage() || getWebSqlStorage() || null; if (!storage) {     emr.fire('storageLoaded', null); } <\/code><\/pre>\n
      <\/div>\n<\/div>\n
      \u041f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043e\u0447\u0435\u043d\u044c \u0441\u0445\u0435\u043c\u0430\u0442\u0438\u0447\u043d\u043e\u0439, \u0434\u0443\u043c\u0430\u044e \u0437\u0434\u0435\u0441\u044c \u0435\u0441\u0442\u044c \u043d\u0430\u0434 \u0447\u0435\u043c \u043f\u043e\u0434\u0443\u043c\u0430\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043a\u0430\u0440\u0442\u044b, \u043f\u043e\u043a\u0430 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435; \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0442\u044c \u043a\u0430\u043a\u0438\u0435 \u0442\u0430\u0439\u043b\u044b \u0435\u0441\u0442\u044c \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0431\u0435\u0437 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043a API; \u043f\u043e\u043f\u044b\u0442\u0430\u0442\u044c\u0441\u044f \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0432 \u043e\u0434\u043d\u0443 \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u044e, \u0447\u0442\u043e\u0431\u044b \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0430\u043f\u0438\u0441\u0435\u0439 \u043d\u0430 \u0434\u0438\u0441\u043a; \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u043b\u043e\u0431\u044b \u0442\u0430\u043c \u0433\u0434\u0435 \u043e\u043d\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f Indexed DB \u0432 \u0441\u0442\u0430\u0440\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0431\u0443\u0434\u0435\u0442 \u043f\u0430\u0434\u0430\u0442\u044c, \u0442\u043a \u0432 \u043d\u0438\u0445 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435 onupgradeneeded<\/code>.<\/p>\n
    IMG to data URI & CORS<\/h4>\n
      \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0442\u0430\u0439\u043b\u044b \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 data URI, \u0442\u043e \u0435\u0441\u0442\u044c base64 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f canvas \u0438 \u0435\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438 toDataURL<\/code> \u0438\u043b\u0438 getImageData<\/code>:<\/p>\n
    _imageToDataUri: function (image) {     var canvas = window.document.createElement('canvas');     canvas.width = image.width;     canvas.height = image.height;      var context = canvas.getContext('2d');     context.drawImage(image, 0, 0);      return canvas.toDataURL('image\/png'); } <\/code><\/pre>\n
      \u0422\u0430\u043a \u043a\u0430\u043a html \u044d\u043b\u0435\u043c\u0435\u043d\u0442 img \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043b\u044e\u0431\u043e\u0439 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0439 \u0440\u0435\u0441\u0443\u0440\u0441, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0438 \u043d\u0430 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u0445 \u0438 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0444\u0430\u0439\u043b\u043e\u0432\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435, \u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u044d\u0442\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0442\u0440\u0435\u0442\u044c\u0435\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0443\u0433\u0440\u043e\u0437\u0443 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043d\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u044e\u0449\u0438\u0435 Access-Control-Allow-Origing<\/code> \u0434\u043b\u044f \u0412\u0430\u0448\u0435\u0433\u043e \u0434\u043e\u043c\u0435\u043d\u0430 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043b\u044c\u0437\u044f. \u0411\u043b\u0430\u0433\u043e \u0442\u0430\u0439\u043b\u044b mapnik \u0438\u043b\u0438 \u0436\u0435 tile.openstreetmap.org \u0438\u043c\u0435\u044e\u0442 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a Access-Control-Allow-Origing: *<\/code>, \u043d\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0444\u043b\u0430\u0433 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 img.crossOrigin<\/code> \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 Anonymous<\/code>.<\/p>\n
      \u0420\u0430\u0431\u043e\u0442\u0430 CORS \u0432 \u0434\u0430\u043d\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u043e \u0432\u0441\u0435\u0445 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u043d\u0435 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u043e\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0434\u043b\u044f \u0441\u0432\u043e\u0435\u0433\u043e \u0441\u0430\u0439\u0442\u0430 \u043f\u0440\u043e\u043a\u0441\u0438 \u043d\u0430 \u0441\u0432\u043e\u0435\u043c \u0434\u043e\u043c\u0435\u043d\u0435 \u0438\u043b\u0438 \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 CORS \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0434\u043b\u044f Phoengap \u0430\u0434\u0435\u043f\u0442\u043e\u0432. \u041b\u0438\u0447\u043d\u043e \u0443 \u043c\u0435\u043d\u044f \u0434\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u043d\u0435 \u0432\u0437\u043b\u0435\u0442\u0435\u043b \u0432 \u0430\u043d\u0434\u0440\u043e\u0438\u0434\u043e\u0432\u0441\u043a\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e (androin 4.0.4 sony xperia active), \u0430 \u0432 \u043e\u043f\u0435\u0440\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0430\u0439\u043b\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u043b\u0438\u0441\u044c \u0441\u0442\u0440\u0430\u043d\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c (\u0441\u0440\u0430\u0432\u043d\u0438 \u0447\u0442\u043e \u0438\u043d\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f<\/a> \u0438 \u0442\u043e \u0447\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435<\/a>, \u043d\u043e \u044d\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u0431\u0430\u0433 \u043e\u043f\u0435\u0440\u044b).<\/p>\n
      \u0417\u0434\u0435\u0441\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c WebWorkers<\/code><\/a> + AJAX<\/code> \u0432\u043c\u0435\u0441\u0442\u043e canvas<\/code>.<\/p>\n
    Leaflet<\/h4>\n
      \u0418\u0442\u0430\u043a \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0435 JS API \u043a\u0430\u0440\u0442 \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c \u043a\u043e\u0434\u043e\u043c, \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043d\u0434\u0438\u0434\u0430\u0442\u043e\u0432 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f Leaflet<\/a>.<\/p>\n
      \u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438<\/a> \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043c\u0435\u0442\u043e\u0434 \u0442\u0430\u0439\u043b\u043e\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0435 src<\/code> \u0434\u043b\u044f \u0442\u0430\u0439\u043b\u043e\u0432: <\/p>\n
    _loadTile: function (tile, tilePoint) {     tile._layer = this;     tile.onload = this._tileOnLoad;     tile.onerror = this._tileOnError;      tile.src = this.getTileUrl(tilePoint); } <\/code><\/pre>\n
      \u0422\u043e \u0435\u0441\u0442\u044c \u0435\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u043a\u043b\u0430\u0441\u0441 \u0438 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 src<\/code> \u0438\u0437 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430, \u0442\u043e \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0442\u043e \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e. \u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u0431\u044b\u043b\u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u044b \u0438\u0437 \u0441\u0435\u0442\u0438 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0435 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435.<\/p>\n
    \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u043b\u044f Leaflet<\/b><\/p>\n
    \n
    var StorageTileLayer = L.TileLayer.extend({     _imageToDataUri: function (image) {         var canvas = window.document.createElement('canvas');         canvas.width = image.width;         canvas.height = image.height;          var context = canvas.getContext('2d');         context.drawImage(image, 0, 0);          return canvas.toDataURL('image\/png');     },      _tileOnLoadWithCache: function () {         var storage = this._layer.options.storage;         if (storage) {             storage.add(this._storageKey, this._layer._imageToDataUri(this));         }         L.TileLayer.prototype._tileOnLoad.apply(this, arguments);     },      _setUpTile: function (tile, key, value, cache) {         tile._layer = this;         if (cache) {             tile._storageKey = key;             tile.onload = this._tileOnLoadWithCache;             tile.crossOrigin = 'Anonymous';         } else {             tile.onload = this._tileOnLoad;         }         tile.onerror = this._tileOnError;         tile.src = value;     },      _loadTile: function (tile, tilePoint) {         this._adjustTilePoint(tilePoint);         var key = tilePoint.z + ',' + tilePoint.y + ',' + tilePoint.x;          var self = this;         if (this.options.storage) {             this.options.storage.get(key, function (value) {                 if (value) {                     self._setUpTile(tile, key, value, false);                 } else {                     self._setUpTile(tile, key, self.getTileUrl(tilePoint), true);                 }             }, function () {                 self._setUpTile(tile, key, self.getTileUrl(tilePoint), true);             });         } else {             self._setUpTile(tile, key, self.getTileUrl(tilePoint), false);         }     } }); <\/code><\/pre>\n
      <\/div>\n<\/div>\n
      \u0421\u0430\u043c\u0430 \u0436\u0435 \u043a\u0430\u0440\u0442\u0430 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n
    var map = L.map('map').setView([53.902254, 27.561850], 13); new StorageTileLayer('http:\/\/{s}.tile.osm.org\/{z}\/{x}\/{y}.png', {storage: storage}).addTo(map); <\/code><\/pre>\n
      \u0422\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0430\u0448\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0432 Application Cache, \u0447\u0442\u043e\u0431\u044b \u043a\u0430\u0440\u0442\u0430 \u043c\u043e\u0433\u043b\u0430 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0431\u0435\u0437 \u0441\u0435\u0442\u0438 \u0441 \u0437\u0430\u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438 \u0442\u0430\u0439\u043b\u0430\u043c\u0438:<\/p>\n
    Application Cache manifest \u0434\u043b\u044f Leaflet<\/b><\/p>\n
    \n
    CACHE MANIFEST  NETWORK: *  CACHE: index.html style.css event.js storage.js map.js run.js  leaflet.css leaflet.js images\/layers.png images\/marker-icon.png images\/marker-icon@2x.png images\/marker-shadow.png <\/code><\/pre>\n
      <\/div>\n<\/div>\n
      \u041f\u0440\u0438\u043c\u0435\u0440<\/a> \u0438 \u0435\u0433\u043e \u043a\u043e\u0434 \u043d\u0430 \u0433\u0438\u0442\u0445\u0430\u0431\u0435<\/a>.<\/p>\n
    Mapbox (modesmaps)<\/h4>\n
      \u0415\u0449\u0435 \u043e\u0434\u043d\u0438\u043c \u043a\u0430\u043d\u0434\u0438\u0434\u0430\u0442\u043e\u043c \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0433\u043e JS API \u043a\u0430\u0440\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f mapbox<\/a> \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043d\u0430 modesmaps<\/a>.<\/p>\n
      \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 mapbox<\/a> \u043c\u044b \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043c \u0434\u043b\u044f \u043d\u0430\u0441 \u043d\u0438\u0447\u0435\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0433\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u043c modestmaps<\/a>. \u041d\u0430\u0447\u043d\u0435\u043c \u0441 TemplatedLayer<\/code><\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u044b\u0447\u043d\u044b\u043c \u0441\u043b\u043e\u0435\u043c \u043a\u0430\u0440\u0442\u044b \u0441 \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u044b\u043c \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u043e\u043c, \u0442\u0435 \u043a\u043e\u0434 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 \u0441\u043b\u043e\u044f:<\/p>\n
    MM.TemplatedLayer = function(template, subdomains, name) {     return new MM.Layer(new MM.Template(template, subdomains), null, name); }; <\/code><\/pre>\n
      \u041d\u0430\u0439\u0434\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u0430 \u0432 \u0441\u043b\u043e\u0435 \u043a\u0430\u0440\u0442\u044b<\/a> \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043d\u0430\u0448 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440 \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043b\u0438\u0431\u043e URL \u0442\u0430\u0439\u043b\u0430, \u043b\u0438\u0431\u043e \u0433\u043e\u0442\u043e\u0432\u044b\u0439 DOM \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043f\u0440\u0438\u0447\u0435\u043c DOM \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u0435\u0442\u0441\u044f, \u0430 URL \u0442\u0430\u0439\u043b\u0430 \u043f\u0435\u0440\u0435\u0441\u044b\u043b\u0430\u0435\u0442\u0441\u044f \u0432 requestManager<\/code>:<\/p>\n
    if (!this.requestManager.hasRequest(tile_key)) {     var tileToRequest = this.provider.getTile(tile_coord);     if (typeof tileToRequest == 'string') {         this.addTileImage(tile_key, tile_coord, tileToRequest);     } else if (tileToRequest) {         this.addTileElement(tile_key, tile_coord, tileToRequest);     } } <\/code><\/pre>\n
      <\/p>\n
    addTileImage: function(key, coord, url) {     this.requestManager.requestTile(key, coord, url); } <\/code><\/pre>\n
      <\/p>\n
    addTileElement: function(key, coordinate, element) {     element.id = key;     element.coord = coordinate.copy();     this.positionTile(element); } <\/code><\/pre>\n
      \u0421\u0430\u043c \u0436\u0435 requestManager<\/code> \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0435 \u0441\u043b\u043e\u044f \u043a\u0430\u0440\u0442\u044b. \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 DOM \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 img<\/code> \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0435\u0433\u043e src<\/code> \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 processQueue<\/code><\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u0430\u043a\u0436\u0435 \u0434\u0435\u0440\u0433\u0430\u0435\u0442\u0441\u044f \u0438\u0437 \u0441\u043b\u043e\u044f \u043a\u0430\u0440\u0442\u044b:<\/p>\n
    processQueue: function(sortFunc) {     if (sortFunc && this.requestQueue.length > 8) {         this.requestQueue.sort(sortFunc);     }     while (this.openRequestCount < this.maxOpenRequests && this.requestQueue.length > 0) {         var request = this.requestQueue.pop();         if (request) {             this.openRequestCount++;             var img = document.createElement('img');             img.id = request.id;             img.style.position = 'absolute';             img.coord = request.coord;             this.loadingBay.appendChild(img);             img.onload = img.onerror = this.getLoadComplete();             img.src = request.url;             request = request.id = request.coord = request.url = null;         }     } } <\/code><\/pre>\n
      \u0422\u043e \u0435\u0441\u0442\u044c \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434, \u0442\u043e \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0436\u0435\u043b\u0430\u0435\u043c\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/p>\n
    \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u043b\u044f mapbox (modestmaps)<\/b><\/p>\n
    \n
    var StorageRequestManager = function (storage) {     MM.RequestManager.apply(this, []);     this._storage = storage; };  StorageRequestManager.prototype._imageToDataUri = function (image) {     var canvas = window.document.createElement('canvas');     canvas.width = image.width;     canvas.height = image.height;      var context = canvas.getContext('2d');     context.drawImage(image, 0, 0);      return canvas.toDataURL('image\/png'); };  StorageRequestManager.prototype._createTileImage = function (id, coord, value, cache) {     var img = window.document.createElement('img');     img.id = id;     img.style.position = 'absolute';     img.coord = coord;     this.loadingBay.appendChild(img);     if (cache) {         img.onload = this.getLoadCompleteWithCache();         img.crossOrigin = 'Anonymous';     } else {         img.onload = this.getLoadComplete();     }     img.onerror = this.getLoadComplete();     img.src = value; };  StorageRequestManager.prototype._loadTile = function (id, coord, url) {     var self = this;     if (this._storage) {         this._storage.get(id, function (value) {             if (value) {                 self._createTileImage(id, coord, value, false);             } else {                 self._createTileImage(id, coord, url, true);             }         }, function () {             self._createTileImage(id, coord, url, true);         });     } else {         self._createTileImage(id, coord, url, false);     } };  StorageRequestManager.prototype.processQueue = function (sortFunc) {     if (sortFunc && this.requestQueue.length > 8) {         this.requestQueue.sort(sortFunc);     }     while (this.openRequestCount < this.maxOpenRequests && this.requestQueue.length > 0) {         var request = this.requestQueue.pop();         if (request) {             this.openRequestCount++;             this._loadTile(request.id, request.coord, request.url);             request = request.id = request.coord = request.url = null;         }     } };  StorageRequestManager.prototype.getLoadCompleteWithCache = function () {     if (!this._loadComplete) {         var theManager = this;         this._loadComplete = function(e) {             e = e || window.event;              var img = e.srcElement || e.target;             img.onload = img.onerror = null;              if (theManager._storage) {                 theManager._storage.add(this.id, theManager._imageToDataUri(this));             }              theManager.loadingBay.removeChild(img);             theManager.openRequestCount--;             delete theManager.requestsById[img.id];              if (e.type === 'load' && (img.complete ||                 (img.readyState && img.readyState === 'complete'))) {                 theManager.dispatchCallback('requestcomplete', img);             } else {                 theManager.dispatchCallback('requesterror', {                     element: img,                     url: ('' + img.src)                 });                 img.src = null;             }              setTimeout(theManager.getProcessQueue(), 0);         };     }     return this._loadComplete; };  MM.extend(StorageRequestManager, MM.RequestManager);  var StorageLayer = function(provider, parent, name, storage) {     this.parent = parent || document.createElement('div');     this.parent.style.cssText = 'position: absolute; top: 0px; left: 0px;' +         'width: 100%; height: 100%; margin: 0; padding: 0; z-index: 0';     this.name = name;     this.levels = {};     this.requestManager = new StorageRequestManager(storage);     this.requestManager.addCallback('requestcomplete', this.getTileComplete());     this.requestManager.addCallback('requesterror', this.getTileError());     if (provider) {         this.setProvider(provider);     } };  MM.extend(StorageLayer, MM.Layer);  var StorageTemplatedLayer = function(template, subdomains, name, storage) {     return new StorageLayer(new MM.Template(template, subdomains), null, name, storage); }; <\/code><\/pre>\n
      <\/div>\n<\/div>\n
      \u0421\u0430\u043c\u0430 \u0436\u0435 \u043a\u0430\u0440\u0442\u0430 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n
    var map = mapbox.map('map'); map.addLayer(new StorageTemplatedLayer('http:\/\/{S}.tile.osm.org\/{Z}\/{X}\/{Y}.png', ['a', 'b', 'c'], undefined, storage)); map.ui.zoomer.add(); map.ui.zoombox.add(); map.centerzoom({lat: 53.902254, lon: 27.561850}, 13); <\/code><\/pre>\n
      \u0422\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0430\u0448\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0432 Application Cache, \u0447\u0442\u043e\u0431\u044b \u043a\u0430\u0440\u0442\u0430 \u043c\u043e\u0433\u043b\u0430 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0431\u0435\u0437 \u0441\u0435\u0442\u0438 \u0441 \u0437\u0430\u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438 \u0442\u0430\u0439\u043b\u0430\u043c\u0438:<\/p>\n
    Application Cache manifest \u0434\u043b\u044f Mapbox (modestmaps)<\/b><\/p>\n
    \n
    CACHE MANIFEST  NETWORK: *  CACHE: index.html style.css event.js storage.js map.js run.js  mapbox.css mapbox.js map-controls.png <\/code><\/pre>\n
      <\/div>\n<\/div>\n
      \u041f\u0440\u0438\u043c\u0435\u0440<\/a> \u0438 \u0435\u0433\u043e \u043a\u043e\u0434 \u043d\u0430 \u0433\u0438\u0442\u0445\u0430\u0431\u0435<\/a>.<\/p>\n
    OpenLayers<\/h4>\n
      \u0418 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c \u043a\u0430\u043d\u0434\u0438\u0434\u0430\u0442\u043e\u043c \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0433\u043e JS API \u043a\u0430\u0440\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f OpenLayers<\/a>.<\/p>\n
      \u041c\u043d\u0435 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0442\u044c \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0438\u0434, \u0432 \u0438\u0442\u043e\u0433\u0435 \u043c\u043e\u0439 \u0444\u0430\u0439\u043b \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u043f\u0440\u0438\u043e\u0431\u0440\u0435\u043b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0432\u0438\u0434:<\/p>\n
    [first]  [last]  [include] OpenLayers\/Map.js OpenLayers\/Layer\/OSM.js OpenLayers\/Control\/Zoom.js OpenLayers\/Control\/Navigation.js OpenLayers\/Control\/TouchNavigation.js  [exclude] <\/code><\/pre>\n
      \u042f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c OpenLayers.Layer.OSM<\/code><\/a>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u0447\u043d\u0443 \u043f\u043e\u0438\u0441\u043a \u0441 \u043d\u0435\u0433\u043e:<\/p>\n
    url: [     'http:\/\/a.tile.openstreetmap.org\/${z}\/${x}\/${y}.png',     'http:\/\/b.tile.openstreetmap.org\/${z}\/${x}\/${y}.png',     'http:\/\/c.tile.openstreetmap.org\/${z}\/${x}\/${y}.png' ] <\/code><\/pre>\n
      OpenLayers.Layer.OSM<\/code> \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442\u0441\u044f \u043e\u0442 OpenLayers.Layer.XYZ<\/code> \u0441 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c\u0438 URL. \u0417\u0434\u0435\u0441\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0435\u043d \u043c\u0435\u0442\u043e\u0434 getURL<\/code><\/a>:<\/p>\n
    getURL: function (bounds) {     var xyz = this.getXYZ(bounds);     var url = this.url;     if (OpenLayers.Util.isArray(url)) {         var s = '' + xyz.x + xyz.y + xyz.z;         url = this.selectUrl(s, url);     }      return OpenLayers.String.format(url, xyz); } <\/code><\/pre>\n
      \u0422\u0430\u043a\u0436\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0435\u043d \u043c\u0435\u0442\u043e\u0434 getXYZ<\/code><\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043b\u044e\u0447\u0430:<\/p>\n
    getXYZ: function(bounds) {     var res = this.getServerResolution();     var x = Math.round((bounds.left - this.maxExtent.left) \/         (res * this.tileSize.w));     var y = Math.round((this.maxExtent.top - bounds.top) \/         (res * this.tileSize.h));     var z = this.getServerZoom();      if (this.wrapDateLine) {         var limit = Math.pow(2, z);         x = ((x % limit) + limit) % limit;     }      return {'x': x, 'y': y, 'z': z}; } <\/code><\/pre>\n
      \u0421\u0430\u043c OpenLayers.Layer.XYZ<\/code> \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442\u0441\u044f \u043e\u0442 OpenLayers.Layer.Grid<\/code>, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u043c\u0435\u0442\u043e\u0434 addTile<\/code><\/a> \u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u0431\u044f \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0442\u0430\u0439\u043b\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e tileClass<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f OpenLayers.Tile.Image<\/code><\/a>:<\/p>\n
    addTile: function(bounds, position) {     var tile = new this.tileClass(         this, position, bounds, null, this.tileSize, this.tileOptions     );     this.events.triggerEvent("addtile", {tile: tile});     return tile; } <\/code><\/pre>\n
      \u0412 OpenLayers.Tile.Image<\/code> src<\/code> \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 setImgSrc<\/code><\/a>:<\/p>\n
    setImgSrc: function(url) {     var img = this.imgDiv;     if (url) {         img.style.visibility = 'hidden';         img.style.opacity = 0;         if (this.crossOriginKeyword) {             if (url.substr(0, 5) !== 'data:') {                 img.setAttribute("crossorigin", this.crossOriginKeyword);             } else {                 img.removeAttribute("crossorigin");             }         }         img.src = url;     } else {         this.stopLoading();         this.imgDiv = null;         if (img.parentNode) {             img.parentNode.removeChild(img);         }     } } <\/code><\/pre>\n
      \u041d\u043e \u0432 \u043d\u0435\u043c \u043d\u0435 \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 onload<\/code> \u0438 onerror<\/code>. \u0421\u0430\u043c \u043c\u0435\u0442\u043e\u0434 \u0434\u0435\u0440\u0433\u0430\u0435\u0442\u0441\u044f \u0438\u0437 initImage<\/code><\/a>, \u0433\u0434\u0435 \u044d\u0442\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0438 \u0432\u0435\u0448\u0430\u044e\u0442\u0441\u044f:<\/p>\n
    initImage: function() {     this.events.triggerEvent('beforeload');     this.layer.div.appendChild(this.getTile());     this.events.triggerEvent(this._loadEvent);     var img = this.getImage();     if (this.url && img.getAttribute("src") == this.url) {         this._loadTimeout = window.setTimeout(             OpenLayers.Function.bind(this.onImageLoad, this), 0         );     } else {         this.stopLoading();         if (this.crossOriginKeyword) {             img.removeAttribute("crossorigin");         }         OpenLayers.Event.observe(img, "load",             OpenLayers.Function.bind(this.onImageLoad, this)         );         OpenLayers.Event.observe(img, "error",             OpenLayers.Function.bind(this.onImageError, this)         );         this.imageReloadAttempts = 0;         this.setImgSrc(this.url);     } } <\/code><\/pre>\n
      \u041c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043c\u0435\u0442\u043e\u0434 \u043a\u043b\u0430\u0441\u0441\u0430 \u0441\u043b\u043e\u044f getURL<\/code>, \u0430 \u0442\u0430\u043a\u0436\u0435 initImage<\/code>, \u0434\u0435\u0440\u0433\u0430\u044e\u0442\u0441\u044f \u0438\u0437 renderTile<\/code><\/a>:<\/p>\n
    renderTile: function() {     if (this.layer.async) {         var id = this.asyncRequestId = (this.asyncRequestId || 0) + 1;         this.layer.getURLasync(this.bounds, function(url) {             if (id == this.asyncRequestId) {                 this.url = url;                 this.initImage();             }         }, this);     } else {         this.url = this.layer.getURL(this.bounds);         this.initImage();     } } <\/code><\/pre>\n
      \u0418\u0442\u0430\u043a \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441, \u0442\u043e \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0436\u0435\u043b\u0430\u0435\u043c\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/p>\n
    \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u043b\u044f OpenLayers<\/b><\/p>\n
    \n
    var StorageImageTile = OpenLayers.Class(OpenLayers.Tile.Image, {     _imageToDataUri: function (image) {         var canvas = window.document.createElement('canvas');         canvas.width = image.width;         canvas.height = image.height;          var context = canvas.getContext('2d');         context.drawImage(image, 0, 0);          return canvas.toDataURL('image\/png');     },      onImageLoadWithCache: function() {         if (this.storage) {             this.storage.add(this._storageKey, this._imageToDataUri(this.imgDiv));         }         this.onImageLoad.apply(this, arguments);     },      renderTile: function() {         var self = this;         var xyz = this.layer.getXYZ(this.bounds);         var key = xyz.z + ',' + xyz.y + ',' + xyz.x;         var url = this.layer.getURL(this.bounds);         if (this.storage) {             this.storage.get(key, function (value) {                 if (value) {                     self.initImage(key, value, false);                 } else {                     self.initImage(key, url, true);                 }             }, function () {                 self.initImage(key, url, true);             });         } else {             self.initImage(key, url, false);         }     },      initImage: function(key, url, cache) {         this.events.triggerEvent('beforeload');         this.layer.div.appendChild(this.getTile());         this.events.triggerEvent(this._loadEvent);         var img = this.getImage();          this.stopLoading();         if (cache) {             OpenLayers.Event.observe(img, 'load',                 OpenLayers.Function.bind(this.onImageLoadWithCache, this)             );             this._storageKey = key;         } else {             OpenLayers.Event.observe(img, 'load',                 OpenLayers.Function.bind(this.onImageLoad, this)             );         }         OpenLayers.Event.observe(img, 'error',             OpenLayers.Function.bind(this.onImageError, this)         );         this.imageReloadAttempts = 0;         this.setImgSrc(url);     } });  var StorageOSMLayer = OpenLayers.Class(OpenLayers.Layer.OSM, {     async: true,     tileClass: StorageImageTile,      initialize: function(name, url, options) {         OpenLayers.Layer.OSM.prototype.initialize.apply(this, arguments);         this.tileOptions = OpenLayers.Util.extend({             storage: options.storage         }, this.options && this.options.tileOptions);     },      clone: function (obj) {         if (obj == null) {             obj = new StorageOSMLayer(this.name,                 this.url,                 this.getOptions());         }          obj = OpenLayers.Layer.Grid.prototype.clone.apply(this, [obj]);         return obj;     } }); <\/code><\/pre>\n
      <\/div>\n<\/div>\n
      \u0421\u0430\u043c\u0430 \u0436\u0435 \u043a\u0430\u0440\u0442\u0430 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n
    var map = new OpenLayers.Map('map'); map.addLayer(new StorageOSMLayer(undefined, undefined, {storage: storage})); var fromProjection = new OpenLayers.Projection('EPSG:4326'); var toProjection   = new OpenLayers.Projection('EPSG:900913'); var center = new OpenLayers.LonLat(27.561850, 53.902254).transform(fromProjection, toProjection); map.setCenter(center, 13); <\/code><\/pre>\n
      \u0422\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0430\u0448\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0432 Application Cache, \u0447\u0442\u043e\u0431\u044b \u043a\u0430\u0440\u0442\u0430 \u043c\u043e\u0433\u043b\u0430 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0431\u0435\u0437 \u0441\u0435\u0442\u0438 \u0441 \u0437\u0430\u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438 \u0442\u0430\u0439\u043b\u0430\u043c\u0438:<\/p>\n
    Application Cache manifest \u0434\u043b\u044f OpenLayers<\/b><\/p>\n
    \n
    CACHE MANIFEST  NETWORK: *  CACHE: index.html style.css event.js storage.js map.js run.js  theme\/default\/style.css OpenLayers.js <\/code><\/pre>\n
      <\/div>\n<\/div>\n
      \u041f\u0440\u0438\u043c\u0435\u0440<\/a> \u0438 \u0435\u0433\u043e \u043a\u043e\u0434 \u043d\u0430 \u0433\u0438\u0442\u0445\u0430\u0431\u0435<\/a>.<\/p>\n
      \u0415\u0449\u0435 \u044f \u043d\u0430\u0448\u0435\u043b \u0443\u0436\u0435 \u0433\u043e\u0442\u043e\u0432\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043a\u044d\u0448\u0430 OpenLayers.Control.CacheWrite<\/code><\/a>, \u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c localStorage<\/code>, \u0447\u0442\u043e \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e.<\/p>\n
    \u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h4>\n
      \u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0447\u0442\u043e \u0445\u043e\u0442\u0435\u043b. \u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0448\u0443\u0441\u0442\u0440\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0432 \u0445\u0440\u043e\u043c\u0435 \u0438\u043b\u0438 \u0435\u0441\u043b\u0438 \u0443 \u0412\u0430\u0441 SSD, \u0432 \u043b\u0438\u0441\u0435 \u0438 \u043e\u043f\u0435\u0440\u0435 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u0440\u043c\u0430\u0437\u0430 \u043f\u0440\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0438 \u043d\u0430 \u0434\u0438\u0441\u043a, \u043e\u0441\u043b\u0430 \u043f\u043e\u0434 \u0440\u0443\u043a\u043e\u0439 \u043d\u0435 \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c. \u0422\u043e\u0440\u043c\u043e\u0437\u0430 \u043f\u0440\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0438 \u0432 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445, \u043f\u0440\u0438\u0447\u0435\u043c \u0434\u0430\u0436\u0435 \u043f\u0440\u0438 \u0447\u0442\u0435\u043d\u0438\u0438, \u0447\u0442\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043c\u0435\u043d\u044f \u0440\u0430\u0441\u0441\u0442\u0440\u043e\u0438\u043b\u043e, \u0442\u043a \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0434\u0430\u043d\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u0431\u043e\u043b\u0435\u0435 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u0430.<\/p>\n
      \u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 IndexedDB<\/code> \u0438\u043b\u0438 WebSQL<\/code> \u0432\u043f\u043e\u043b\u043d\u0435 \u0445\u0432\u0430\u0442\u0438\u0442 \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0433\u043e\u0440\u043e\u0434 \u0438\u043b\u0438 \u0431\u043e\u043b\u044c\u0448\u0435, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0431\u043e\u043b\u0435\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u043c \u0447\u0435\u043c \u0432 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435 \u0441 localstrage<\/code>.<\/p>\n
      \u0412 \u043c\u043e\u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u043c\u0438 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430\u043c\u0438, \u043d\u043e \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u0444\u043e\u0440\u0442\u0430 \u043d\u0443\u0436\u043d\u043e \u0435\u0449\u0435 \u043f\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0430\u0434 \u0438\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0432\u044b\u0441\u0438\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u0442\u0435\u043c \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u0441\u0435\u0439\u0447\u0430\u0441.    \t \t\t \t\t\t \t<\/p>\n
    \n
    \n
    \u041a\u0430\u043a\u0438\u043c\u0438 JS API \u043a\u0430\u0440\u0442 \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435\u0441\u044c \u0412\u044b?<\/div>\n
      \t\t \t\t  \t\t<\/p>\n\n\n\n\n\n\n\n\n\n\n
     \t\t\t\t\t \t\t\t\t<\/td>\n \t\t\t\t\t
     \t\t\t\t\t \t\t\t\t<\/td>\n \t\t\t\t\t
     \t\t\t\t\t \t\t\t\t<\/td>\n \t\t\t\t\t
     \t\t\t\t\t \t\t\t\t<\/td>\n \t\t\t\t\t
     \t\t\t\t\t \t\t\t\t<\/td>\n \t\t\t\t\t
     \t\t\t\t\t \t\t\t\t<\/td>\n \t\t\t\t\t
     \t\t\t\t\t \t\t\t\t<\/td>\n \t\t\t\t\t
     \t\t\t\t\t \t\t\t\t<\/td>\n \t\t\t\t\t
     \t\t\t\t\t \t\t\t\t<\/td>\n \t\t\t\t\t