Q&A
回答いただき、ありがとうございます。このデータの文字化けは直りました。ただ、別のデータファイルだと以前文字化けが生じていました。そちらはうまく保存し直せてないのでしょうかね。terapadで保存し直したのですが。
windows.localStorageへの、テキストファイルからの保存について教えてください。
あらかじめwindows.localStorageに、コードと名称の対を保存しておいて、１つめの入力欄（変換元のキーの後のinput）にコードを入れ、フォーカスを移動させると、２つめの入力欄（変換後の名称の後のinput）にそのコードに対応する名称を入れたいと思っています。
目標は、keydata.txtというようなテキストファイルからデータを読み込み、localStorageに、コードと名称の対を保存します。
ですが、外部のテキストファイルから読み込むと、うまくいきません。console.logで挙動を見ているのですが、その挙動からはlocalStorageに保存、その直後に、コードで参照して読み出しているように見えます。ですが、その後、上記入力欄での変換ができません。
一方、プログラムのコードに書き込んでおいたカンマ区切りのデータを読み込んで、localStorageに保存したとき（内部データを読み込みを実行したとき）には、保存もでき、上記入力欄での変換もできます。
最終的には外部のファイルから読み取る必要があります。どこがいけないのか教えていただけないでしょうか。
もう一つ、内部データを読み込むと２バイト文字も文字化けしませんが、テキストファイルから読み込むと２バイト文字が文字化けします。これも理由が分かれば教えていただけると助かります。
よろしくお願いします。
サンプルの説明：再現できているものを貼り付けてあります。
変換元のキー：ここにコードを入れてから、ｔａｂなどでフォーカスを移動させます
変換後の名称：変換元のキーにコードを入れてから、フォーカスを移動させるとここに名称が現れます。
内部データを読み込み：convert.jsの内部に変数の初期値として用意してあるコードと名称の対をlocalStorageに保存するボタン
クリア：localStorageをクリアするボタン
参照：テキストファイルを読み込んで、コードと名称の対をlocalStorageに保存するボタン
convert.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Input page</title> <script src="jquery.js" ></script> <script src="convert.js"></script> </head> <body> <div> 変換元のキー : <input type="text" id="userText2" onchange="codehenkan(this.value, 'userText3')"><BR> 変換後の名称 : <input type="text" id="userText3" value=""><BR> <input type="button" id="reg" value=" 内部データを読み込み"><BR> <input type="button" id="clr" value=" クリア "><BR> <input type="file" id="fileButton"><br> <textarea style="height: 20em;" id="output"></textarea> </div> <div class="viewarea" id="output"></div> </body> </html> convert.js // DOMの準備後に実行する内容 $(function () { // 対応の確認 if (!window.File || !window.FileReader || !window.FileList || !window.Blob) { return; } // ファイル選択変更時の処理を設定 $("#fileButton").change(function (event) { // 変更されたファイル情報の一覧を配列として取得 var files = event.target.files; // ファイル情報を1つずつ得て処理していく for (var i = 0; i < files.length; i++) { // ファイル情報を1つ取得 var f = files[i]; console.log("ファイル名：" + f.name); console.log("種類：" + f.type); console.log("サイズ：" + f.size); // ファイル読み取り用の「FileReader」を作成 var reader = new FileReader(); // ファイル読み取り完了時のイベント reader.onload = function (e) { // 文字列を取得 var text = e.target.result; // 行数を追加 var arr = text.split("\n"); var arr2 = ""; for (var i = 0; i < arr.length; i++) { arr2 = arr[i].split(","); localStorage.setItem(arr2[0], arr2[1]); //Storageに書き込み var inname = localStorage.getItem(arr2[0]); //Storageから読み込み console.log("arr2[0or1]:", arr2[0], arr2[1], " readed :", inname); arr[i] = i + " : " + arr[i]; console.log("arr[i]:", arr[i]); } text = arr.join("\n"); // 文字列を表示 $("#output").val(text); }; // テキストとして読み込む reader.readAsText(f); } }); // ［登録］ボタンを押した時の処理を設定 $("#reg").click(function () { // 入力欄の値を取得 var inkey = ["0001", "0002", "0003", "0004", "0005", "0006", "0007", "0008"] var inname = ["apple", "banana", "orange", "grape", "リンゴ", "バナナ", "ミカン", "ブドウ"] //"0001", "apple" //"0002", "banana" //"0003", "orange" //"0004", "grape" //"0005", "リンゴ" //"0006", "バナナ" //"0007", "ミカン" //"0008", "ブドウ" for (i = 0; i < inkey.length; i++) { localStorage.setItem(inkey[i], inname[i]); //Storageに書き込み } }); // ［クリア］ボタンを押した時の処理を設定 $("#clr").click(function () { // 入力欄の値を取得 localStorage.clear(); //Storageにclear }); // codeset function(){ // var storage = localStorage; // storage.setItem("00000", "SeikoEpson"); // }; // codechange function(){ // var storage = localStorage; // storage.setItem("00000", "SeikoEpson"); // }; }); // インプットエリアの値が変化したら、その値を使ってsessionstorageを検索し、引かれた項目名を返す // ag1はインプットエリアの値、 // ag2は書き込むインプットエリアをｉｄで特定 // function codehenkan(ag1, ag2) { // alert("execute onchange codehenkan"+ag1); var inname = localStorage.getItem(ag1); //Storageから読み込み console.log("ag1]:", ag1, " 読込 :", inname); // console.log("Your name is " + inname); if (inname == null) inname = "データがない！"; if (inname == "") inname = "文字が未入力！"; document.getElementById(ag2).value = inname; return false; } ; keydata.txt "1001", "apple" "1002", "banana" "1003", "orange" "1004", "grape" "1005", "リンゴ" "1006", "バナナ" "1007", "ミカン" "1008", "ブドウ"
回答2件
0
自己解決
試行錯誤の末、テキストファイルから読み込むときには、””でくくってはいけないことが分かりました。一方、コードの中に配列でデータを入れるときには””でくくらないといけません。
余談ですが、keydata0.txtのように1行目から2バイト文字が入ると文字化けを避けられませんでした。最初の数行は1バイト文字だけにしておくと、文字化けが解消しました。
keydata.txt 1001, apple 1002, banana 1003, orange 1004, grape 1005, リンゴ 1006, バナナ 1007, ミカン 1008, ブドウ table.js var inkey = ["0001", "0002", "0003", "0004", "0005", "0006", "0007", "0008"] var inname = ["apple", "banana", "orange", "grape", "リンゴ", "バナナ", "ミカン", "ブドウ"] keydata0.txt 1005, リンゴ 1006, バナナ 1007, ミカン 1008, ブドウ
投稿2019/05/09 23:09
総合スコア16
0
keydata.txtの保存時の文字コードをutf8n(bomなし)で試してみてください
投稿2019/05/07 00:51
総合スコア114775
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/09 23:37