source: branches/testa-single-bookmark/local_storage.html

Last change on this file was 32, checked in by anonymous, 6 years ago

use local\storage.html
File size: 3.3 KB
Line 
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
7    <title>md2site-localstorage</title>
8  </head>
9  <body>
10    <H2>localstorage [info]</H2>
11    <textarea id="lstainfo" cols="100" rows="25" ></textarea>
12    <H2>localstorage [0/data]</H2>
13    <textarea id="lsta0data" cols="100" rows="25" ></textarea>
14    <H2>localstorage [0/setting]</H2>
15    <textarea id="lsta0setting" cols="100" rows="25" ></textarea>
16    <H2>localstorage [0/output]</H2>
17    <textarea id="lsta0output" cols="100" rows="25" ></textarea>
18    <H2>localstorage [x]</H2>
19    <textarea id="lstax" cols="100" rows="2" ></textarea>
20<table cellpadding="0" cellspacing="0" border="0" class="tbl">
21<col width="15%" />
22<col width="15%" />
23<col width="70%" />
24<tbody>
25<tr>
26<th></th>
27<td></td>
28</tr>
29</tbody>
30</table>
31
32    <script type="text/javascript">
33function m_receive(ev){
34console.log( "m_rec")
35
36    let value = localStorage.getItem(ev.originalEvent.key)
37    let sel = null
38    switch (ev.originalEvent.key) {
39    case 'info':
40        sel = `#lstainfo`
41        break
42    case '0/data':
43        sel = `#lsta0data`
44        break
45    case '0/setting':
46        sel = `#lsta0setting`
47        break
48    case '0/output':
49        sel = `#lsta0output`
50        break
51    default:
52        break
53    }
54    if( sel !== null ){
55        $( sel ).val( value )
56    }
57}
58
59function show_localstorage(){
60    let nums=["0"]
61    let parts=["data", "setting", "output"]
62   
63    let key
64    let content
65    let sel
66
67//console.log( Object.keys( localStorage ) )
68
69    nums.map( (num) => {
70        parts.map( (part) => {
71            key = `${num}/${part}`
72//          console.log("key=" + key )
73            content = localStorage.getItem(key)
74//          console.log("content=" + content )
75            sel = `#lsta${num}${part}`
76//          console.log("sel=" + sel )
77            //            let obj = JSON.parse(content)
78            //            $( sel ).val( JSON.stringify( obj, null, "\t") )
79            $( sel ).val( content  )
80        } )
81    })
82}
83
84function show_info(){
85    key = "info"
86//    console.log("key=" + key )
87    let content_info = localStorage.getItem(key)
88//    console.log("content_info=" + content_info )
89    let sel_info = `#lsta${key}`
90   
91//    console.log("sel_info=" + sel_info )
92    $( sel_info ).val( content_info )
93}
94
95function show_x(strx){
96    localStorage.setItem('x' , strx)
97    let ct = localStorage.getItem('x')
98    $('#lstax').val( ct )
99}
100
101function message_broadcast(message)
102{
103    localStorage.setItem('message',JSON.stringify(message));
104    localStorage.removeItem('message');
105}
106
107function message_receive(ev)
108{
109    if (ev.originalEvent.key!='message') return; // ignore other keys
110    var message=JSON.parse(ev.originalEvent.newValue);
111    if (!message) return; // ignore empty msg or msg reset
112
113    // here you act on messages.
114    // you can send objects like { 'command': 'doit', 'data': 'abcd' }
115    if (message.command == 'doit') alert(message.data);
116
117    // etc.
118}
119
120/* message_broadcast({'command':'reset'}) */
121
122/* $(window).on('storage', message_receive) */
123$(window).on('storage', m_receive)
124
125let strx = "aBc"
126
127show_info()
128show_localstorage()
129
130console.log( $(window) )
131
132      //HTMLを初期化
133//      $("table.tbl tbody").html("");
134
135    </script>
136  </body>
137</html>
Note: See TracBrowser for help on using the repository browser.