Strageオブジェクトを使ってブラウザにデータを保存する方法について

Question

以下のようなJavaScriptを書きました(テキストにあったサンプルコードです)。
拡張子を.jsにするとそのままでは実行できないので、「MyStrage.html」として実行しようとしました。

<script>
    var MyStorage = function (app) {
        this.app = app;
        this.storage = localStorage;
        this.data = JSON.parse(this.storage[this.app] || '{}');
    }
    MyStorage.prototype = {
        getItem: function (key) {
            return this.data[key];
        },
        setItem: function (key, value) {
            this.data[key] = value;
        },
        save: function () {
            this.storage[this.app] = JSON.stringify(this.data);
        }
    }
</script>

しかし、ローカルから直接実行するfile:///・・の書き方だとうまくいかないようです。
具体的にはローカルのディレクトリにある「MyStrage.html」をダブルクリックして実行しました。
しかしブラウザの開発ツールのApplicationを確認しても、localstrageにデータは特に追加されていないので失敗しているようでした。
そこでテキストを確認したところ、http://localhost/・・のようにアクセスしていました。
そこで私もこのやり方で実行したいのですが、どのように書けばいいのでしょうか。
localhostが自分のパソコンのどこのディレクトリを指しているのかわかりません。
「http://localhost/」でアクセスすると「it works！」と表示されます（Macです）。

（追記）
以下の記載により、正常にデータがlocalstrageに保存できました。

var storage = new MyStorage('bbb');
storage.setItem('hoge', 'ほげ');
console.log(storage.getItem('hoge'));
storage.save();

Comments

[y_waiwai]

どのようにアクセスしてるのか具体的に書きましょう。
肝心なところを省略されては答えようがなくなります

[theplace]

すみません、追記というか修正しました。

[m.ts10806]

MAMPとか入れました？

[H40831]

JavaScriptの基礎も含めて、いろいろ必要な知識が足りてないと思うので
すべてをTeratailで回答してもらうのは難しいかもしれません。
ご覧になってるテキストの冒頭に、必要な前提知識とか書いてありませんか？

[theplace]

MAMP入れていないと思いますが、必要でしょうか？

[m.ts10806]

it works！　
出るのはいずれにしてもApacheが入っているということだと思います。

Answer 1

しかしブラウザの開発ツールのApplicationを確認しても、localstrageにデータは特に追加されていないので失敗しているようでした。

上のコードでは、関数を定義しているだけなので、何も実行されません。

（なお、localStorageそのものは、一部ブラウザを除いてfile://でも動かせます）

Comments

[theplace]

ありがとうございます。
失礼しました。
テキストにMystorageオブジェクトを利用するためのコードが記載されていて、その部分が抜けていました。
上記追記部分を記載することで「file://・・」で確かにデータが追加されました。

Answer 2

テキストにあったサンプルコードです

テキストは「抽象化の定義(オブジェクト)/具象化したオブジェクト(インスタンス)の違いを理解済み」とした説明ですね。

抽象化する理由は、ブラウザ実装の localStorage は、同期的に読み書きするので、頻繁にアクセスすると処理コストがかかります。そこで、dataプロパティにキャッシュする。というもの。

サンプルコードの使い方

let myStorage = new MyStorage("strAppName");// new演算子でインスタンス生成
let value = myStorage.getItem( key )
myStorage.setItem( key, value )
myStorage.save()

• MDN localStorage
• Qiita WebStorage API(LocalStorage)を使ってみた

私もこのやり方（http://localhost/..のようにアクセス）で実行したい

「httpd mac it works！」でGoogle検索してみると、こちらの質問がヒットしました。
Macは使ってないので、よくわかりませんが、WebServer(Apache) が動いていると思います。

Comments

[theplace]

ありがとうございます。
失礼しました。
テキストにMystorageオブジェクトを利用するためのコードが記載されていて、その部分が抜けていました。
上記追記部分を記載することで確かにデータが追加されました。

ご記載いただいたコードで実行してみたところ、keyが未定義ですのようなエラーが出たため、以下のようにすると正常にデータが保存できました。

let myStorage = new MyStorage("strAppName");
myStorage.setItem('key', 'value');
let value = myStorage.getItem('key');
console.log(value);
myStorage.save();

「http://localhost/..」でアクセスする方法についてもありがとうございます。
ずっとモヤモヤしていたので助かりました。

Answer 3

JSON.stingify(キー,保存データ);

で保存して下さい。

Comments

[theplace]

ありがとうございます。
失礼しました。
テキストにMystorageオブジェクトを利用するためのコードが記載されていて、その部分が抜けていました。
上記追記部分を記載することで確かにデータが追加されました。