API tools faq
paste
Advertisement
Guest User

Local Storage Database Manager

a guest
Apr 19th, 2018
268
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.48 KB | None | 0 0
raw download clone embed print report
  1.  
  2.  
  3. <!-- saved from url=(0065)http://192.168.1.252:8080/websites/_test/memory/localstorage.html -->
  4. <html><head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=8, user-scalable=yes" />
  7.  
  8.  <script src="../../_common/common.js"></script>
  9.  <style>
  10.   /* main */
  11.   * {  box-sizing: border-box; }
  12.   html {  display:block; width:100%; height:100%;   }
  13.  
  14.   /* layout */
  15.   #main{}
  16.   #main td{vertical-align:top;}
  17.   #leftSide,#rightSide {  width:45%; outline:1px solid #222;  }
  18.   #leftSide *,#rightSide * { margin-left:auto; margin-right:auto  }
  19.     /*  left  */
  20.     #form1, #form2 {  width:95%;  }
  21.     /* right */
  22.     #output{width:95%; font-size:0.8em; font-family:courier; padding-left:12px; background:#EEE;}
  23.    
  24.    
  25.   /* other */
  26.   label{width:80px; display:inline-block;}
  27.   input[type="textbox"]{  width:280px;  }
  28.   .del{color:#F00; font-size:1.3em; text-decoration:none;}
  29.   #mess1,#mess2{color:#444;}
  30.   .showElement {  display:block!important }
  31.  
  32.   /* table selection button + menu */
  33.   #tableselect {  position:relative; display:inline-block  }
  34.     #tableselectbutton {  
  35.       background:#39d; color:#fff;
  36.       font-size:16px; border:none; cursor:pointer  }
  37.     #tableselectbutton:hover,#tableselectbutton:focus  {  color:#fff;
  38.       background:#28b; box-shadow:1px 8px 10px 2px rgba(0,0,0,0.7) }
  39.     #tableselected { ;   }
  40.     #tableselectitems {  
  41.         display:none; position:absolute; background:#eee;
  42.         min-width:50px; box-shadow:0px 0px 16px 3px rgba(0,0,0,0.7); z-index:10000  }
  43.       #tableselectitems a {  
  44.         color:#000; padding:12px 16px; text-decoration:none;
  45.         display:block; border:0 solid #444; border-width:1 1 1 1 }
  46.       #tableselectitems a:hover {  background:#ddd!important }
  47.  
  48.   /* tables */
  49.   #list1{width:100%}
  50.   #grid{width:95%; border:1px solid #CCC; border-collapse:collapse; font-size:0.8em;}
  51.   #grid caption {font-weight:800; background:#ddd}
  52.   #grid th{background:#EEE;}
  53.   #grid td{padding:1px 6px; vertical-align:top;}
  54.  
  55.  
  56.  </style>
  57. <script>
  58. /*---- STORAGE MANAGER ----*/
  59. var datamanager={
  60.   get : function(table,id){
  61.     if(!table || !id){return null;}
  62.     return window.localStorage.getItem(table+"["+id.toString()+"]");
  63.   },
  64.   set : function(table,id,record){
  65.     if(!table){return null;}
  66.     if(id==null){ id=this.nextid(table); }
  67.     window.localStorage.setItem(table+"["+id.toString()+"]",record);
  68.     return id;
  69.   },
  70.   del : function(table,id){
  71.     if(!table || !id){return null;}
  72.     window.localStorage.removeItem(table+"["+id.toString()+"]");
  73.     return true;
  74.   },
  75.   zap : function(table){
  76.     if(!table){return null;}
  77.     var i=0;
  78.     var n=0;
  79.     var v=null;
  80.     var x=null;
  81.     var j=table+"."; //delete properties
  82.     var k=table+"["; //delete records
  83.     var l=table.length+1;
  84.     var s = [];
  85.     for(i=0;i<window.localStorage.length;i++){
  86.      v = window.localStorage.key(i);
  87.      x = v.substr(0,l);
  88.      if(x==j || x==k){ s.push(v); n++;}
  89.    }
  90.    for(i=0;i<s.length;i++){ window.localStorage.removeItem(s[i]);}
  91.    
  92.    try{
  93.    tables=window.localStorage.getObj("tables")
  94.    out(tables)
  95.    tables = tables.filter(  function(item){  return item !== table  })
  96.    out(tables)
  97.    window.localStorage.setObj("tables",tables)
  98.    } catch(e){  out(e)  }
  99.    
  100.    return n;
  101.  },
  102.  nextid : function(table){
  103.    if(!table){return null;}
  104.    var n = 0;
  105.    n = window.localStorage.getItem(table+".nextid");
  106.    if(!n){n=0;}
  107.    n++;
  108.    window.localStorage.setItem(table+".nextid",n.toString());
  109.    return n;
  110.  },
  111.  id : function(table){
  112.    return window.localStorage.getItem(table+".nextid");
  113.  }
  114. }  
  115.  
  116. /*---- VISUALS ----*/
  117.  
  118. function welcome(){
  119.  if(!window.localStorage.visitcount){window.localStorage.visitcount=0;}
  120.  window.localStorage.visitcount++;
  121.  $("visitcount").innerHTML = window.localStorage.visitcount+ ((window.localStorage.visitcount<2) ? " time" : " times")
  122.  $("lastvisit").innerHTML  = (window.localStorage.lastvisit===undefined) ? "never" : window.localStorage.lastvisit
  123.  window.localStorage.lastvisit="on "+new Date();
  124.  refreshUI()
  125. }
  126.  
  127.  
  128. function refreshUI(){
  129.  showgrid();
  130.  refreshSelectMenu()
  131.  mess1()
  132.  mess2()
  133. }
  134. function showgrid(){
  135.  tabObj=window.localStorage.getObj("tables")
  136.  if(!tabObj){  tabObj=[-1]  }
  137.  
  138.  var html=""
  139.  for(tab=0, len=tabObj.length; tab<len; tab++)
  140.  {
  141.    table=tabObj[tab]
  142.    if(tabObj==-1){  html="<table>Nothing here</table>"  }
  143.     else
  144.     {
  145.    
  146.       html+="<table id='grid'>\n";
  147.       html+="<caption>table: "+table+" &nbsp; <a onmouseover='mess1(\""+text.zap+"\",\""+table+"\")' href='javascript:dropTable(\""+table+"\")' class='del'>&#x2717;</a></caption>"
  148.       html+="<tr><th>ID</th><th>Name</th><th>Phone</th><th>Email</th><th>&nbsp;</th></tr>";
  149.       var i=0;
  150.       var n=0;
  151.       var x=null;
  152.       var k=table+"[";
  153.       var l=table.length+1;
  154.       var s=[];
  155.       var o=null;
  156.       var id=null;
  157.       for(i=0;i<window.localStorage.length;i++){
  158.        x = window.localStorage.key(i);
  159.        if(x.substr(0,l)==k){ s.push(x); n++;}
  160.      }
  161.      s.sort();
  162.      
  163.      for(i=0;i<s.length;i++){
  164.        o = JSON.parse(window.localStorage.getItem(s[i]));
  165.        id=s[i].substring(s[i].indexOf("[")+1,s[i].indexOf("]"));
  166.        html+="<tr><td>"+id+"</td><td><a href='javascript:modRecord(\""+table+"\","+id+")'>"+o[0]+"</a></td><td>"+o[1]+"</td><td>"+o[2]+"</td><td><a href='javascript:delRecord(\""+table+"\","+id+")' class='del'>&#x2717;</a></td></tr>";
  167.       }
  168.       html+="</table>";
  169.      
  170.      
  171.     }
  172.   }
  173.   $("list1").innerHTML=html;
  174.   showraws();
  175. }
  176.  
  177. /*----  Test  ----*/
  178.  
  179. function test(){
  180.   try{
  181.     clearDatabase()
  182.    
  183.   }  catch(e){  out(e)  }
  184.  
  185.  
  186.   /*
  187.   for(tab=0, len=window.localStorage.getObj("tables").length; tab>-1; tab--){
  188.       currentTable=window.localStorage.getObj("tables")[tab]
  189.       out("table:" +currentTable)
  190.     }
  191.    
  192.     tables=window.localStorage.getObj("tables")
  193.   if(!tables){  tables=[]  }
  194.   tables.push(tablename)
  195.   window.localStorage.setObj("tables",tables)
  196.   */
  197. }
  198.  
  199. /*---- ACTIONS ----*/
  200. function load(){
  201.   var data=[
  202.    ['1 Doe'     ,'555-1231','johndoe@gmail.com'],
  203.    ['2 Doe'     ,'555-1232','janedoe@hotmail.com'],
  204.    ['3 Doe'    ,'555-1233','jimmydoe@yahoo.com'],
  205.    ['4 Doe' ,'555-1235','jennifer@example.com'],
  206.    ['5 Doe'    ,'555-1237','jamie@example.com']
  207.   ];
  208.   for(i=0;i<data.length;i++){ datamanager.set("customers",null,data[i].toSource()); }
  209.  
  210.  var data2=[
  211.   ['Joel Doe'     ,'555-1231','johndoe@gmail.com'],
  212.   ['Jenk Doe'     ,'555-1233','jimmydoe@yahoo.com'],
  213.   ['Johan Doe'    ,'555-1234','joanne@example.com'],
  214.   ['Hennifer Doe' ,'555-1235','jennifer@example.com'],
  215.   ['Yamie Doe'    ,'555-1237','jamie@example.com']
  216.  ];
  217.  for(i=0;i<data2.length;i++){ datamanager.set("customers2",null,data2[i].toSource()); }
  218.  
  219.  window.localStorage.setObj("tables",["customers","customers2"])
  220.  
  221.  out(data.length+data2.length+" records loaded...");
  222.  refreshUI()
  223. }
  224.  
  225. function saveTable(){
  226. //  prevent dupes in loop
  227. //  maybe replace with objects so JS native prevents dupes?
  228.  var tablename= $('tablename').value
  229.  if(!tablename){  return  }
  230.  
  231.  tables=window.localStorage.getObj("tables")
  232.  if(!tables){  tables=[]  }
  233.  tables.push(tablename)
  234.  window.localStorage.setObj("tables",tables)
  235.  refreshUI()
  236.  //  add tables to record  'tableselect'
  237. }
  238.  
  239. function saveRecord(isNew){
  240.  try{
  241.  var tablename= $('tableselected').value
  242.  var id=$("id").value;    if(id=="" || isNew){id=null;}
  243.  var rec=[];
  244.  rec[0]=$("name" ).value==""?"[new]":$("name").value;
  245.  rec[1]=$("phone").value;
  246.  rec[2]=$("email").value;
  247.  id = datamanager.set(tablename,id,rec.toSource());
  248.  $("id").value = id;
  249.  refreshUI()
  250.  }  catch(e){  out(e)  }
  251. }
  252.  
  253. function clearRecord(record){
  254.  if(record===undefined){
  255.    $("tableselected").value="";
  256.    $("id"   ).value = "";
  257.    $("name" ).value = "";
  258.    $("phone").value = "";
  259.    $("email").value = "";
  260.  }
  261.  else{
  262.    $(record).value = "";
  263.  }
  264. }
  265.  
  266. function modRecord(table,id){
  267.  //if(!table){return;}
  268.  var rec = JSON.parse(datamanager.get(table,id));
  269.  $("tableselected").value=table
  270.  $("id"   ).value = id;
  271.  $("name" ).value = rec[0];
  272.  $("phone").value = rec[1];
  273.  $("email").value = rec[2];
  274. }
  275.  
  276. function delRecord(table,id){  
  277.  if(!table){return;}
  278.  datamanager.del(table,id);
  279.  refreshUI()
  280. }
  281.  
  282. function dropTable(table){
  283.  var n = datamanager.zap(table);
  284.  refreshUI()
  285.  tablesel=$('tableselected').value
  286.  if(table==tablesel){
  287.    clearRecord()
  288.  }
  289.  out(n+" records deleted");
  290. }
  291.  
  292. function clearDatabase(){
  293.  // clears only the tables, not other data
  294.  tables=window.localStorage.getObj("tables")
  295.  tab_o=tables.length;
  296.  for(tab=tab_o; tab>-1; tab--){
  297.     currentTable=tables[tab]
  298.     //out("table" +tab+ ":" +currentTable)
  299.     datamanager.zap(currentTable)
  300.   }
  301.   refreshUI()
  302.   out(tab_o+" tables deleted!")
  303. }
  304.  
  305. /*----  debug ----*/
  306. function clearDebug(){ out("<br>",true); }
  307.  
  308. function showraws(){
  309.   var i,k,v,z;
  310.   k = [];
  311.   for(i=0;i<window.localStorage.length;i++){ k.push(window.localStorage.key(i)); }
  312.  k.sort();
  313.  clearDebug();
  314.  for(i=0;i<k.length;i++){
  315.   v=window.localStorage.getItem(k[i]);
  316.   out(k[i]+": "+v);
  317.  }
  318.  out("&nbsp;");
  319. }
  320. function space(){
  321. //  shows length, bytes, max
  322.  out("Space used: "+window.localStorage.length);
  323. }
  324. function emptyLocalStorage(){
  325.  window.localStorage.clear();
  326.  refreshUI()
  327.  out("Storage is empty...");
  328. }
  329.  
  330.  
  331. /* ---- menu manager ---- */
  332.  
  333. function makeMenuItem(item){
  334.  html='<a href="#" onclick="menuSelect(\''+item+'\')">'+item+'</a>'
  335.   return html
  336. }
  337. function refreshSelectMenu(){
  338.   try{
  339.   tables=window.localStorage.getObj("tables")
  340.   if(!tables){  
  341.     $('tableselectitems').innerHTML='Nothing Here'
  342.     return
  343.   }
  344.   html=''
  345.   for(tab=0, len=tables.length; tab<len; tab++){
  346.      currentTable=tables[tab]
  347.      //out("table:" +currentTable)
  348.      html+=makeMenuItem(currentTable)
  349.  }
  350.  $('tableselectitems').innerHTML=html
  351.  } catch(e){  out(e)  }  
  352. }
  353.  
  354. function openMenu(){
  355.  $('tableselectitems').classList.toggle('showElement')
  356. }
  357. function menuSelect(item){
  358.  $("tableselected").value=item
  359.  $("id").value=datamanager.id(item)
  360. }
  361.  
  362. /*---- TEXT ----*/
  363. var text={
  364.  show :'Show the contents of the local storage',
  365.  clear:'Clears the output window',
  366.  empty:'Clears the local storage',
  367.  zap  :'Deletes all records from the table ',
  368.  space:'Shows available space in the local storage',
  369.  load :'Loads test data in the local storage',
  370.  view :'Refresh all records in the datagrid',
  371.  end  :'The End',
  372.  test :'Test some shit',
  373.  addtable :'Adds a new table',
  374.  addrecord :'Adds a new record',
  375.  deldb : 'Clears all tables'
  376. };
  377.  
  378. /*---- events ----*/
  379.  
  380. window.onclick= function(event){
  381.  //  menu hide if clicked outside
  382.  try{
  383.  
  384.  
  385.  //out(event +' '+event.target+' '+event.target.id)
  386.  if(event.target.id!='tableselectbutton'){
  387.    t=$('tableselectitems').classList
  388.    if(t.contains('showElement')){  t.remove('showElement')  }
  389.  }
  390.  }  catch(e){  out(e)  }
  391. }
  392.  
  393. /*---- UTILITIES ----*/
  394. function getAttr(element,attribute){
  395.  return document.getElementById(element).getAttribute(attribute)
  396. }
  397. function setAttr(element,attribute,newvalue){
  398.  return document.getElementById(element).setAttribute(attribute,newvalue)
  399. }
  400. function $(id){ return document.getElementById(id); }
  401. function debug(msg){ setTimeout("throw(new Error('"+msg+"'))",0); }
  402. function mess1(msg,table) {
  403.  if(!table){  table=""  }
  404.  if(!msg){  msg=""  }
  405.  document.getElementById("mess1").innerHTML=">"+msg+" "+table;
  406. }
  407. function mess2(msg) {
  408.   if(!msg){  msg=""  }
  409.   document.getElementById("mess2").innerHTML=">"+msg;
  410. }
  411. function out(msg,noappend){
  412.   if(noappend){ document.getElementById("output").innerHTML=msg; }
  413.   else{ document.getElementById("output").innerHTML+="<br>"+msg; }
  414. }
  415. Storage.prototype.setObj = function(key, obj) {
  416.     return this.setItem(key, JSON.stringify(obj))
  417. }
  418. Storage.prototype.getObj = function(key) {
  419.     return JSON.parse(this.getItem(key))
  420. }
  421.  
  422.  
  423. </script>
  424. </head>
  425. <body onload="welcome()" class="fuck">
  426. <div id="welcome">
  427.  Welcome, you have visited us <span id="visitcount">0</span>.<br>
  428.  You last visit was <span id="lastvisit">0</span>.<br>
  429. </div>
  430. <hr>
  431. <table id="main">
  432.  <tbody><tr>
  433.   <td id='leftSide'>
  434.    <div>
  435.     <button onclick="load()" onmouseover="mess1(text.load)">Load Test Data</button>
  436.     <button onclick="clearDatabase()" onmouseover="mess1(text.deldb)">Clear Database</button>
  437.     <button onclick="test()" onmouseover="mess1(text.test)">Test</button><br>
  438.    
  439.     <span id="mess1">&gt;</span>
  440.    </div>
  441.    <fieldset id="form1"><legend><b>Add Table</b></legend>
  442.     <label>Name: </label><input type="textbox" name="name" id="tablename"> <a href='javascript:clearRecord("tablename")' class='del'>&#x2717;</a>  <br>
  443.     <button onclick="saveTable()" onmouseover="mess1(text.addtable)">Create Table</button>
  444.    </fieldset>
  445.    <br>
  446.    <fieldset id="form2"><legend><b>Add Record</b></legend>
  447.     <label><button id="tableselectbutton" onclick="openMenu()">Table </button><div id='tableselectitems'></div>:</label><input type="textbox" id="tableselected" disabled><br>
  448.     <label>ID:   </label><input type="textbox" name="id" id="id" disabled><br>
  449.     <label>Name: </label><input type="textbox" name="name" id="name"> <a href='javascript:clearRecord("name")' class='del'>&#x2717;</a>  <br>
  450.     <label>Phone:</label><input type="textbox" name="phone" id="phone"> <a href='javascript:clearRecord("phone")' class='del'>&#x2717;</a>  <br>
  451.     <label>Email:</label><input type="textbox" name="email" id="email"> <a href='javascript:clearRecord("email")' class='del'>&#x2717;</a>  <br>
  452.     <button onclick="clearRecord()">Clear Record</button>
  453.     <button onclick="saveRecord()">Save Record</button>
  454.     <button onclick="saveRecord(true)">Save as New</button>
  455.    </fieldset>
  456.    <br>
  457.    <div id="list1"><table id="grid"></table></div>
  458.   </td>
  459.   <td id='rightSide'>
  460.    <div>
  461.     <button onclick="showraws()" onmouseover="mess2(text.show)">Show Storage</button>
  462.     <button onclick="emptyLocalStorage()" onmouseover="mess2(text.empty)">Empty Storage</button>
  463.     <button onclick="space()" onmouseover="mess2(text.space)">Storage Space</button>
  464.     <button onclick="clearDebug()" onmouseover="mess2(text.clear)">Clear Output</button>
  465.     <br>
  466.     <span id="mess2">&gt;</span>
  467.    </div>
  468.    <div id="output"></div>
  469.    
  470.    </td>
  471.  </tr>
  472. </tbody></table>
  473. <hr>
  474.  
  475. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!