JavaScriptでオブジェクトをzlib圧縮してCookieに保存できる「zcookies」ライブラリの利用方法
あるシステムでCookieを保存している部分があった。ただ、日本語を保存している筈なのにブラウザの開発者ツールで確認するとランダム英数字で保存されていた。どうも「zcookies」というライブラリを使用しているようで、こちらはzlib圧縮してCookie保存⇔展開できるというライブラリみたい。以下に利用方法のメモ。
GitHub
https://github.com/ukyo/zcookies
読み込み方法
CDNは無いっぽいのでこちらのページからzcookies.min.jsをダウンロードし、適当なディレクトリにアップロードすること。
特長・メリット
- zlib圧縮されるためより多くのデータが保存できる。
- オブジェクトをそのまま保存できる(js-cookieだとjson等に変換してから保存する必要あり)。
- 保存されるデータの見た目がランダム英数字なので多少はセキュリティ対策になるかも?
利用方法
ソースコード
<script> const data = { name: '田中', age: 20, }; zcookies.set('data', data); //data:"a1qSl5ibuuz5lA1PdqxdnJieKgIA" const cookie = zcookies.get('data'); console.log(cookie); //Object { name: "田中", age: 20 } </script>
解説等
コメントにも書いているがCookieを保存すると「a1qSl5ibuuz5lA1PdqxdnJieKgIA」というデータが保存される。展開すると元のオブジェクトして利用できる。
オプション項目
Cookie保存時のオプション項目はこちらのページを参照すること。
関連記事
-
-
横スクロール可能な要素を視覚的に分かりやすくする「ScrollHint」ライブラリの利用方法
横長のtableを設置し、CSSのoverflowで横スクロール可能にしてもユー ...
-
-
画像にマウスを合わせると拡大表示させる「drift」ライブラリの利用方法
amazon等ECサイトで商品画像にマウスを合わせると当該部分が拡大表示されると ...
-
-
JavaScriptで画像読み込み完了のタイミングを検知する「imagesLoaded」ライブラリの利用方法
大き目のサイズの画像をページに設置すると読み込み完了まで時間がかかる。その画像が ...
-
-
JavaScriptライブラリChart.jsでグラフの描写する方法
JavaScriptでグラフを描写する必要があり、普段はHighchartを使用 ...
-
-
表示範囲を自由に変更可能な折れ線グラフが表示できるJSライブラリ amCharts の使用方法
どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...