bootstrapによるワンポイントローカルストレージ

4918 ワード
ブックストリーム locastorge ローカルストレージ
まず、みなさんに何がlocastorgeですか？
先日、古いプロジェクトでクッキーの操作がおかしいと思いました。問い合わせはURLの上でパラメータを伝達しないように、いくつかの情報をキャッシュしておきます。
①クッキーの大きさは4 k程度に制限されており、業務データの保存には適していません。
②クッキーはHTTPトランザクションと一緒に送信するたびに、帯域幅を浪費する
私達はモバイルプロジェクトをしていますので、ここで本当に適した技術はlocastorgeです。locastorgeはクッキーに最適化されています。これを使うとクライアントにデータを保存しやすく、HTTP伝送に伴いません。でも大丈夫です。
①locastorgeサイズは500万文字程度に制限されていますが、各ブラウザは一致していません。
②locastorgeはプライバシーモードでは読み取れません。
③locastorgeの本質はファイルを読んだり書いたりすることです。データが多いとカードを比較します。（firefoxは一度にデータをメモリに導入します。考えると怖いです。）
④locastorgeは爬虫類されません。URLの代わりに、完全に使わないでください。
以上の問題は避けられますので、どのようにlocastorgeを使うべきか、そしてどのように正しく使うべきかに注目しています。
要約:
H 5ローカルストレージ
以前は、いくつかのデータを保存したいですが、フロントエンドだけでは使えません。cookieの中にしか存在しませんでした。しかし、cookieは要求ヘッドに従ってクライアントとサービス端末の間を往復します。クッキーにはまだいくつかの欠点があります。H 5はweb StorrageのAPIを提供して、クライアントのデータ記憶をします。
cookieとweb Storrageの違い
  • cookieは大きさの制限があります。4 kbしか記憶できません。web Storrageは5 Mバイト、クッキーは条数の制限があります。
    • 。
  • cookieは、要求ヘッドに従ってクライアントとサービス端末の間を伝達し、帯域幅に影響を与える。
  • cookieは有効期限を設定する必要があります。local Strageは永久保存です。session Strageはセッション保存です。
  • クッキーは、ロールパス
    • を設定することができます。
  • cookieの操作は難しいです。web StorrageのAPIは
    • になりやすいです。
  • cookieの互換性はweb Strage互換性よりも良いです。

    • web Strageに含まれる記憶方式
  • local Storrage：有効期限は永遠で、永久に保存します。
    • を手動で削除しない限り
  • session Strage：有効期間は一回のセッション時間
    • です。
  • global Strage、indexedDB、webSQLは互換性、実用性が悪いので、使用しません。
    • local Strageとsession Strageの使い方（API）
  • local Strageとsession Strageの使い方は同じです。
  • 添削
    • 増/改：locastrage.setItem(key，value)/local Strage.a=1
    検索:レングス;keyメソッド(index)は、対応するkey getItem(key)/local Strage.aを得る。
    削除：removeItem(key)
    クリア：clear（）
    
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<style>
 .panel-body input.form-control{
 width: 200px;
 }
</style>
<body>
 <div class="container">
 <div class="panel panel-primary insert">
 <div class="panel-heading">

   

 </div>
 <div class="panel-body">
 <label for="">key:</label>
 <input type="text" id="key" class="form-control">
 <label for="">value:</label>
 <input type="text" id="value" class="form-control">
 <button onclick="save()">save</button>
 </div>
 </div>
 <div class="panel panel-primary select">
 <div class="panel-heading">
 key-value-list:
 </div>
 <div class="panel-body">
 <button onclick="select()" class="btn btn-success">select</button>
 <button onclick="abc()" class="btn btn-warning">clear</button>
 <hr>
 <ul class="list-group">
 </ul>
 </div>
 </div>
 </div>
 </div>
 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
 <script>
 function save(){
 var key = $(".insert #key").val()
 var value = $(".insert #value").val()
 localStorage.setItem(key,value)
 //select()
 }
 function select(){
 let str = ''
 for(var i = 0;i < localStorage.length;i ++){
 var key = localStorage.key(i)
 var value = localStorage.getItem(key)
 str +=`
 <li class="list-group-item clearfix">
 key: <span class="label label-primary key">${key}</span> &nbsp;&nbsp;&nbsp;
 value: <span class="label label-primary value">${value}</span>
 <button data-key='${key}' class="btn btn-danger delete pull-right">delete</button>
 </li>
 `
 }
 $(".select ul").html(str)
 }
 function abc(){
 localStorage.clear()
 $(".select ul").html("")
 }
 $(".select ul").delegate(".delete",'click',function () {
 console.log(1)
 var key = $(this).data("key")
 localStorage.removeItem(key)
 $(this).parent().remove()
 })
 </script>
</body>
    締め括りをつける
    以上は小编で绍介したbootstrapに基づいて书かれたワンポイントのlocal Strageです。皆さんに助けてほしいです。もし何か疑问があれば、メッセージをください。小编はすぐに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。
    springtaskの使用方法とcron表現解析
    Spring Bootはどのように運転時にデータソースを動的に追加しますか？