ui-store/test.html at master · fabrice8/ui-store · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <title>UI-Store | Test</title>
</head>
<body>
  <h3>Store & Value</h3>
  <input type="text" name="store" placeholder="Store Name">
  <input type="text" name="data" placeholder="Enter value">
  <button class="save">Save</button>
  <br><br>
  <div class="stored-data"></div>
  <br><hr>

  <h3>Array Store</h3>
  <input type="text" name="new-data" placeholder="Enter value">
  <button class="add">Add</button>
  <button class="remove">Remove</button>
  <button class="clear">Clear</button>
  <br><br>
  <div class="array-stored"></div>
  <br>
  <hr>

  <h3>More</h3>
  <p>Object Store, Flash Storage, Encryption, ...</p>
  <a href="https://github.com/fabrice8/ui-store">Check Documentation</a>
  <br>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script src="ui-store.min.js"></script>
  <script>
   $(document).ready( async () => {

    let uiStore = new UIStore({
      prefix: 'my_',
      //storage: 'in-memory',
      encrypt: true
    })

    /*-------------------------------------------------------*/
    // on click Save button
    $('.save').click( function(){
      let
      storename = $('input[name="store"]').val(),
      data = $('input[name="data"]').val()

      if( !storename ) alert('Store Name is undefined')
      if( !data ) alert('No data value')

      // Store a new data
      uiStore.set( storename, data )

      // Retreive and display stored data
      let stored = uiStore.get( storename )
      $('.stored-data').html('<b>'+ storename +'</b>: '+ stored )
    } )


    /*-------------------------------------------------------*/
    function showArrayStore(){
      // Retreive and display stored data
      let stored = uiStore.get('array-store')
      $('.array-stored').html('<b>Store</b>: '+ Array.isArray( stored ) && stored.length ? stored.join(', ') : 'Empty' )
    }

    // Display stored data if exist
    showArrayStore()

    // on click Add in array store button
    $('.add').click( function(){
      let data = $('input[name="new-data"]').val()
      if( !data )
        alert('No data value to add')

      // Create array store
      if( !uiStore.get('array-store') )
        uiStore.set( 'array-store', [] )

      // Store a new data
      uiStore.update( 'array-store', data, 'push' )

      // Display stored data
      showArrayStore()
    } )

    // on click Remove item in array store button
    $('.remove').click( function(){
      let data = $('input[name="new-data"]').val()
      if( !data )
        alert('No data value to remove')

      // Delete item from the array store
      uiStore.update('array-store', data, 'remove')

      // Display stored data
      showArrayStore()
    } )

    // on click Clear array store button
    $('.clear').click( function(){
      // Store a new data
      uiStore.clear('array-store')

      // Display stored data
      showArrayStore()
    } )
   })
   </script>
</body>
</html>