インスタンスおよびローカルストレージの詳細

11804 ワード

jquery

localStorageの使い方
localStorageの方法はとても簡単で、基本的な削除です.
何時注意
localStorageに格納されているデータには有効期限がありません.session Storageに格納されているデータは、ブラウザセッション(browsing session)の終了時に消去されます.つまり、ブラウザが閉じたときです.
localStorageでもsessionStorageでも保存されているデータは、そのページのプロトコルに限定されます.
*localStorageに対するブラウザのサイズ制限は*5 MB(ソースごと)で、クッキーよりも大きく、日常的なニーズを満たすことができます.
localStorageは文字列のみを格納し、文字列以外のデータは格納前に文字列に変換されます.そのため、複雑なデータ型を格納するのは面倒かもしれませんが、通常はJSONを先に使用します.stringfy()メソッドはこれを文字列に変換する格納し、使用時に取り出してJSONを使用する.parse()メソッドで復元します.

//        
var user = {
  name: 'John',
  id: '321456',
  isVIP: true,
  arr: [3,2,1],
};
var str = JSON.stringfy(user);
localStorage.setItem('userInfo', str);
//       
var infoStr = localStorage.getItem('userInfo');
var info = JSON.parse(infoStr);

≪インスタンス｜Instance｜emdw≫


<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0">
    <title>FileReadertitle>
head>
<body>
    <div id="file-div">
        <input type="file" name="inputfile" accept="text/plain, text/css, text/html, text/javascript, text/markdown" />
        <textarea name="filereader" placeholder="   txt、js、css html  ，          ">textarea>
        <button type="button" name="storebutton">    button>
        <button type="button" name="clearbutton">    button>
    div>
    <script>
        window.onload = function(){
            var text = document.getElementsByName('filereader')[0],
                inputFile = document.getElementsByName('inputfile')[0],
                storeButton = document.getElementsByName('storebutton')[0],
                clearButton = document.getElementsByName('clearbutton')[0];
            //   localStorage       
            if(window.localStorage.getItem('textareaStorage')) {
                alert('          ，       ');
                text.value = window.localStorage.getItem('textareaStorage');
            }

             //    
            inputFile.onchange = function(){
                console.log(this.files);
                var reader = new FileReader();
                reader.readAsText(this.files[0], 'UTF-8');
                reader.onload = function (e) {
                    // urlData         
                    var urlData = this.result;
                    text.value = urlData;
                };
            };

             //     
            storeButton.onclick = function(){
                window.localStorage.setItem('textareaStorage', text.value);
                alert('    ');
            };

             //     
            clearButton.onclick = function(){
                window.localStorage.removeItem('textareaStorage');
                alert('    ');
            };
        };
    script>
body>
html>

store.js
store.jsはすべてのブラウザに互換性のあるLocalStorageパッケージであり、CookieやFlashで実現する必要はありません.ブラウザ間でローカルストレージ機能を実現するために、非常に簡潔なAPIを提供します.


<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0">
    <title>  title>
    <script src="js/jquery-1.8.2.min.js">script>
    <script src="js/store.min.js">script>
head>
<body>
    <p id="p">  p>
    <script>
        init();
        function init(){
            if(!store.enabled){
                alert("            ，           ");
                return;
            }else{
                store.set('name','mavis');
                store.set('user',{name:'mavis',likes:'javascript'})
                if(store.get('name')){
                 alert('          ，       ');
                 $('#p').html(store.get('name'))
                }
                var user = store.get('user'); //         -      JSON.parse
                store.forEach(function(key, val) {
                    console.log(key, '==', val)
                })  //
            }
        }
    script>    
body>
html>

jsで配列を巡るいくつかの方法のまとめ

jQuery DOMアクション-HTML、テキスト、値の設定と取得