Bookmarklet内の入力値の保存について

はじめに

当方デザイナーです。（プログラミングの知識はなく、jqueryを調べながらコピペしたりして少し書く程度の知識量です。）
今回リキッドデザイン時のガイドをコーダーさんと共有するためのBookmarkletを作成しました。

作ったのが以下のBookmarkletです。

javascript
1javascript:!function(){var e=document.createElement('script');e.src='https://bit.ly/2Lvyexj';var t=document.createElement('link');t.href='https://bit.ly/39GAA4i',t.rel='stylesheet',t.type='text/css',document.head.appendChild(e),document.head.appendChild(t)}();

任意のサイト上で呼び出し、数値を入力するとリキッドレイアウトのガイドが生成されるものです。

中身

※javascriptがわからないので、jqueryで書いています。

javascript
1
2void((function(f){
3  var script = document.createElement('script');
4  script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
5  script.onload = function(){
6    var $ = jQuery.noConflict(true);
7    f($);
8  };
9  document.head.appendChild(script);
10}
11)(
12function($, undefined){
13
14  $(function() {
15
16    //styleを追加
17    $('head').append('<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">');
18
19    //要素を追加
20    $('body').prepend(
21      `<div id="bmgg--content">
22          <div class="bmgg--size">
23            <p>Window:&nbsp;<span></span>px</p>
24            <div class="bmgg--controller">
25              <div class="bmgg--controller_circle"></div>
26            </div>
27          </div>
28          <div id="bmgg--form">
29            <div class="bmgg--form_lr">
30              <p>
31                <span>左アキ</span>
32                <input id="bmgg--input_l" class="bmgg--input input_on" type="text" value="0" tabindex="1">
33                <select id="bmgg--select_l" class="bmgg--select select_on">
34                  <option value="px" selected>px</option>
35                  <option value="%">%</option>
36                  <option value="rem">rem</option>
37                  <option value="vw">vw</option>
38                </select>
39              </p>
40              <p class="bmgg--link"><i class="material-icons show">link</i><i class="material-icons">link_off</i></p>
41              <p>
42                <span>右アキ</span>
43                <input id="bmgg--input_r" class="bmgg--input input_on" type="text" value="0" tabindex="2">
44                <select id="bmgg--select_r" class="bmgg--select select_on">
45                  <option value="px" selected>px</option>
46                  <option value="%">%</option>
47                  <option value="rem">rem</option>
48                  <option value="vw">vw</option>
49                </select>
50              </p>
51            </div>
52            <p>
53              <span>カラム数</span>
54              <input id="bmgg--input_column" class="bmgg--input" type="text" value="0" tabindex="3">
55            </p>
56            <p>
57              <span>間隔</span>
58              <input id="bmgg--input_margin" class="bmgg--input" type="text" value="0" tabindex="4">
59              <select id="bmgg--select_margin" class="bmgg--select">
60                <option value="px" selected>px</option>
61                <option value="%">%</option>
62                <option value="rem">rem</option>
63                <option value="vw">vw</option>
64              </select>
65            </p>
66            <p>
67              <span>最大幅</span>
68              <input id="bmgg--input_maxwidth" class="bmgg--input" type="text" value="" tabindex="5">
69              <select id="bmgg--select_maxwidth" class="bmgg--select">
70                <option value="px" selected>px</option>
71                <option value="rem">rem</option>
72              </select>
73            </p>
74            <p>
75              <span>最小幅</span>
76              <input id="bmgg--input_minwidth" class="bmgg--input" type="text" value="" tabindex="6">
77              <select id="bmgg--select_minwidth" class="bmgg--select">
78                <option value="px" selected>px</option>
79                <option value="rem">rem</option>
80              </select>
81            </p>
82            <button>OK</button>
83          </div>
84          <div id="bmgg--result">
85            <div class="bmgg--line_left"></div>
86            <div id="bmgg--result_column"></div>
87            <div class="bmgg--line_right"></div>
88          </div>
89        </div>`
90    );
91
92    //ボタンクリックで隠す
93    $('#bmgg--form button').on('click', function(){
94      $('#bmgg--form').hide();
95      $('#bmgg--content').addClass('bmgg--button_on');
96    });
97
98    //表示・非表示
99    $('.bmgg--controller').on('click', function(){
100      $('#bmgg--form').toggle();
101      $('#bmgg--content').toggleClass('bmgg--button_on');
102    });
103
104    //左右リンクをクリックしたら
105    $('.bmgg--link').on('click', function(){
106      $(this).toggleClass('link_off')
107      $(this).children('.material-icons').toggleClass('show');
108      $('#bmgg--input_l, #bmgg--input_r').toggleClass('input_on');
109      $('#bmgg--select_l, #bmgg--select_r').toggleClass('select_on');
110    });
111
112    //最初のinputに自動フォーカス
113    $('#bmgg--input_l').focus();
114
115    //ウィンドウサイズ
116    $('.bmgg--size span').text($(window).width());
117    $(window).on('resize', function(){
118      $('.bmgg--size span').text($(window).width());
119    });
120
121  });
122
123  //入力イベント
124  $(document).on('input', '.input_on', function(event){ $('.input_on').val($(this).val());});
125  $(document).on('input', '.select_on', function(event){$('.select_on').val($(this).val());});
126
127  $(document).on('change, input', '.bmgg--input, .bmgg--select', function(event){
128
129    //入力値を取得
130    var value_l = $('#bmgg--input_l').val() + $('#bmgg--select_l option:selected').text();                      //入力値：左のアキ
131    var value_r = $('#bmgg--input_r').val() + $('#bmgg--select_r option:selected').text();                      //入力値：右のアキ
132    var value_column = $('#bmgg--input_column').val()                                                           //入力値：カラム数
133    var value_margin = $('#bmgg--input_margin').val() + $('#bmgg--select_margin option:selected').text();       //入力値：カラム間
134    var value_maxwidth = $('#bmgg--input_maxwidth').val() + $('#bmgg--select_maxwidth option:selected').text(); //入力値：カラム間
135    var value_minwidth = $('#bmgg--input_minwidth').val() + $('#bmgg--select_minwidth option:selected').text(); //入力値：カラム間
136
137    //左右のアキの位置を付与
138    $('.bmgg--line_left').css('width', value_l);
139    $('.bmgg--line_right').css('width', value_r);
140    $('#bmgg--result_column').css('width', 'calc(100vw - (' + value_l + ' + ' + value_r + '))');
141
142    //カラムのラインを生成
143    var margin_size = (value_column - 1);                               //カラム間の数
144    var margin_width = `(${value_margin} * ${margin_size})`             //カラム間の総計
145    var column_width = `((100% - ${margin_width}) / ${value_column})`   //カラムの幅
146    var $result = $('#bmgg--result_column');                            //出力先
147    var line = "";
148
149    //カラムのライン出力
150    for (var i = -1; ++i < value_column;) {
151      line += '<div class="bmgg--line m' + $('#bmgg--input_margin').val() + '" style="width: calc' + column_width + '; left: calc((' + column_width + ' + ' + value_margin + ' ) * ' + i + ');">' + '</div>';
152    }
153    $result[0].innerHTML = line;
154
155    //最大サイズ・最小サイズ
156    $('#bmgg--result_column').css('max-width', value_maxwidth);
157    $('#bmgg--result_column').css('min-width', value_minwidth);
158    $('#bmgg--result').css('min-width', 'calc(' + value_minwidth + ' + (' + value_l + ' + ' + value_r + '))');
159
160  });
161
162  //バージョン確認
163  ;;; console.log('jQuery: ', $().jquery);
164
165
166}
167)
168);

他、CSSも読み込んでいますが本題とは関係ないため省略します。

やりたいこと

機能としては今のままで十分使えているのですが、
今後のアップデートして、以下がBookmarkletで実現できるものかどうかを教えてほしいです。
0. 同じサイト内でページ遷移しても入力値を保ったまま表示ができる
0. サイトごと（ドメインごと）に数字を保存できる（かつ、呼び出せる）

また、実現可能であればどういった方法があるのかもご教示いただけますと幸いです。

ふわっとした質問で恐縮ですが、何卒よろしくお願いいたします。