Month: November 2016

web storageは同一オリジンでデータを保存しています。同階層、下ディレクトでも使えます。sessionStorage(タブが閉じられるまで)とloacalStorage(ブラウザ自体に保存)の二種類があります。chrome developer toolのapplicationパネルで確認できます。

      <script>
      (function(){
        if (typeof(Storage) === "undefined"){
          alert("web storage not supported");
        } else {
          // console.log("supported");
          // var s = sessionStorage;
          var s = localStorage;
          s.setItem('name', 'okada');
          console.log(s.getItem('name'));
        }
      })();
      </script>

setItemと削除

      <script>
      (function(){
        if (typeof(Storage) === "undefined"){
          alert("web storage not supported");
        } else {
          var ls = localStorage;
          var ss = sessionStorage;

          ls.setItem('yamada', 20);
          ls.setItem('kimura', 69);

          ss.setItem('color', 'pink');
          ss.setItem('shape', 'cube');

          // removeItem(key)
          // clear()

          ls.removeItem('yamada');
          ss.clear();
        }
      })();
      </script>

lengthとkey

      <script>
      (function(){
        if (typeof(Storage) === "undefined"){
          alert("web storage not supported");
        } else {
          var s = localStorage;

          s.setItem('okamoto', 90)
          s.setItem('murata', 60)
          s.setItem('ito', 50)

          for (var i = 0; i < s.length; i++){
            console.log(s.key(i) + ':' + s.getItem(s.key(i)));
          }


        }
      })();
      </script>

JSON(javascript object nation)

      <script>
      (function(){
        if (typeof(Storage) === "undefined"){
          alert("web storage not supported");
        } else {
          var s = localStorage;

          var user = {
            name: 'yoshida',
            score: 50
          };

          s.setItem('user', JSON.stringify(user));
          console.dir(JSON.parse(s.getItem('user')));
        }
      })();
      </script>

データの整合性

      <script>
      (function(){
        if (typeof(Storage) === "undefined"){
          alert("web storage not supported");
        } else {
          var s = localStorage;
          s.setItem('name','kurumada');

          window.addEventListener('storage', function(e){
            console.log(e.key + ':' + e.oldValue + '->' + e.newValue);
          });
        }
      })();
      </script>

      <script>
      var s = '@yamada, @sato, @ito';
      var rs = s.match(/yamada/);

      if (rs){
        console.log('マッチしました！');
      }
      </script>

キャレットを使うと、否定、下の例だと、abc以外となります。
[abc]:abc
[a-z]:a~z
[^abc]:abc以外
. :任意の一文字　/y…da/
^ :行頭　/^@yamada/
$ :行末 /@yamada$/
{} :直前の文字の繰り返し回数　0{2} ->00 0{2,}->00以上　0{2,4}->00,000,0000
[a-z]{5} ->a-zの五文字以内
[a-z]{3,6}　->a-zの3~6文字以内
a? : 0or1-> ,a
a* : 0 or more ->, a, aa, aaa
a* : 1 or more -> a, aa, aaa
() :(abc)* -> abc, abcabac
| :or ->(abc|def)
\: \n ->改行, \t ->タブ, \d ->[0-9],\w -> [a-zA-Z0-9_], \s -> スペース　\メタ文字 ->メタ文字
i : 大文字小文字を区別しない　-> (/yamada/i)
g : 全てのマッチした要素を配列で解す -> s.match(/a/g)
m : 複数行に対応させる　-> ^$は一行のみだが、mオプションは複数行
* or + の後の?: 最小マッチ　+?, *?
()RegExp s.match(/(.+?)@yamada) , RegExp.$1

例

<script>
      var s = '@yamada';
      var rs = s.match(/(@[A-Za-z0-9_]{1,15})/);
      console.log(RegExp.$1);
</script>
<script>
      var s = '<title>google.com</title>';
      var rs = s.match(/<title>([^<&#93;+)<\/title>/);
      console.log(RegExp.$1);
</script>

日付の取得

<script>
      var s = '2016-12-01';
      var rs = s.match(/(\d{4})[-\/](\d{2})[-\/](\d{2})/);
      console.log(RegExp.$1+'年'+RegExp.$2+'月'+RegExp.$3+'日');
</script>