質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.80%

windows.localStorageへの、テキストファイルからの保存について教えてください。

解決済

回答 2

投稿

  • 評価
  • クリップ 2
  • VIEW 552

bellevue

score 14

windows.localStorageへの、テキストファイルからの保存について教えてください。
あらかじめwindows.localStorageに、コードと名称の対を保存しておいて、1つめの入力欄(変換元のキーの後のinput)にコードを入れ、フォーカスを移動させると、2つめの入力欄(変換後の名称の後のinput)にそのコードに対応する名称を入れたいと思っています。

目標は、keydata.txtというようなテキストファイルからデータを読み込み、localStorageに、コードと名称の対を保存します。

ですが、外部のテキストファイルから読み込むと、うまくいきません。console.logで挙動を見ているのですが、その挙動からはlocalStorageに保存、その直後に、コードで参照して読み出しているように見えます。ですが、その後、上記入力欄での変換ができません。

一方、プログラムのコードに書き込んでおいたカンマ区切りのデータを読み込んで、localStorageに保存したとき(内部データを読み込みを実行したとき)には、保存もでき、上記入力欄での変換もできます。

最終的には外部のファイルから読み取る必要があります。どこがいけないのか教えていただけないでしょうか。

もう一つ、内部データを読み込むと2バイト文字も文字化けしませんが、テキストファイルから読み込むと2バイト文字が文字化けします。これも理由が分かれば教えていただけると助かります。

よろしくお願いします。

サンプルの説明:再現できているものを貼り付けてあります。

変換元のキー:ここにコードを入れてから、tabなどでフォーカスを移動させます
変換後の名称:変換元のキーにコードを入れてから、フォーカスを移動させるとここに名称が現れます。
内部データを読み込み: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は書き込むインプットエリアをidで特定
//
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", "ブドウ"
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

check解決した方法

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/10 08:37

    > 試行錯誤の末、テキストファイルから読み込むときには、””でくくってはいけないことが分かりました。
    いえ、テキストファイルから取り出すのは関係なくて、CSV解析コードの問題だと思います。
    csvのセル値に"が付くのは、カンマや改行コードに対応する為なので、むしろ、良い作法です。
    https://www.google.com/search?q=rfc4180
    原因はキー値が '0001' !== '"'0001'"' で不一致になることにあるので、"付のセル値も取り出せるように改良を加えるの正攻法かと思います。
    https://gist.github.com/think49/009a8744c147a7013f14ea8913bd9027

    キャンセル

0

keydata.txtの保存時の文字コードをutf8n(bomなし)で試してみてください

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/07 10:27

    回答いただき、ありがとうございます。このデータの文字化けは直りました。ただ、別のデータファイルだと以前文字化けが生じていました。そちらはうまく保存し直せてないのでしょうかね。terapadで保存し直したのですが。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.80%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る