API tools faq
paste
Advertisement
Guest User

Local Storage Database Manager 2.0

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