HTML5

7. Bölüm : Local storage, Session storage ve Web SQL Veritabanları ile veri saklama

İstemci tarafında veri saklama

HTML5 ile gelen istemci tarafında veri saklama seçenekleri :

Limitler :

Web Storage

HTML5 Web Storage ile gelen 2 tip veri saklama imkanımız var :


WebStorage Event Demosu
function setToLocalStorage(text) {
   // localStorage.setItem('demoVariable', text);
   localStorage.demoVariable = text;
}

function getFromLocalStorage() {
   // return localStorage.getItem('demoVariable');
   return localStorage.demoVariable;
}

function deleteFromLocalStorage() {
   // localStorage.removeItem('demoVariable');
   delete localStorage.demoVariable;
}

function clearLocalStorage() {
   var storageLength = localStorage.length;
   localStorage.clear();
   alert(storageLength + ' tane kayıt localStorage\'dan silindi.');
}

function listLocalStorage() {
   for (var i = 0; i < localStorage.length; i++) {
      var currentKey = localStorage.key(i);
      alert(currentKey + ' : ' + localStorage.getItem(currentKey));
   }
}
WebSQL Veritabanı
db.transaction(function (tx) {
   tx.executeSql(sql, [], function (tx, results) {
      // dönen değerler burada işlenir (commit)
   });
   }, function (tx, error) {
      // onError (rollback)
   } });




var db;
function createDb() {
   if (window.openDatabase) {
      // 2 MB'lık veritabanı oluştur :
      var dbName = 'html5DemoDb';
      var dbDesc = 'HTML5 Demo Db';
      var version = '1.0';
      var size = 2 * 1024 * 1024;
      db = openDatabase(dbName, version, dbDesc, size);
   }
}

function createTable() {
   if (db === null) {
      createDb();
   }
   if (db !== null) {
      db.transaction(function (tx) {
         tx.executeSql('CREATE TABLE IF NOT EXISTS messages (message, date)');
      });
   }
}

function insertData(data) {
   if (db === null) {
      createDb();
   }
   if (db !== null) {
      db.transaction(function (tx) {
         tx.executeSql('INSERT INTO messages (message, date) VALUES (?, ?)', [data, new Date()]);
      });
   }
}

function listData() {
   if (db === null) {
      createDb();
   }
   if (db !== null) {
      db.transaction(function (tx) {
         tx.executeSql('SELECT * FROM messages', [],
            function (tx, results) {
               for (var index = 0; index < results.rows.length; index++) {
                  var message = results.rows.item(index).message;
                  var date = results.rows.item(index).date;
                  document.getElementById('divDbRows').innerHTML = document.getElementById('divDbRows').innerHTML + '
[' + date + '] ' + message;
               }
            }
         );
      });
   }
}