ローカルストレージのオリジンについての説明が分からないです

Question

javascriptの勉強をしている際、ストレージの部分の説明で分からない部分があった為、教えて頂きたいです。
ローカルストレージについての説明で、「オリジン単位でデータを管理できる。ウィンドウ/タブをまたいでデータの共有が可能で、ブラウザーを閉じてもデータは維持される。」また、ローカルストレージの問題点として、「同一のオリジンで複数のアプリを稼働している場合、変数名が衝突しやすい。」とあったのですが、「オリジン単位でデータを管理できる」とはどういうことなのでしょうか？オリジンが「url + ホスト名 + ポート番号」というのは分かっているのですが、それ単位でデータを管理できるという所が理解できないです。
また、「同一のオリジンで複数のアプリを稼働している場合、変数名が衝突しやすい。」ここにつきましても、どういうことなのか全く分からない状態です。

Comments

[spookybird]

解決しているのならベストアンサーを選んで解決済みにしてはいかがでしょうか。

Answer 1

「オリジン」はURLを含みませんよ。

【第4回　URLとオリジン：JavaScriptセキュリティの基礎知識｜gihyo.jp … 技術評論社】
http://gihyo.jp/dev/serial/01/javascript-security/0004?page=2

より具体的には，リソースの生成元としてURLに含まれるスキーム，ホスト名，ポート番号の組み合わせを「オリジン」と呼び，JavaScriptからはそのJavaScriptが動作しているWebページとオリジンが同一のリソースに対しては制限なしに自由にアクセスできますが，オリジンが異なるリソースに対しては，リソースの提供側が明示的に許可しない限りは内容を読むことができないなどの制限があります。

---

それ単位でデータを管理できるという所が理解できないです。

teratail.com と google.com ではドメインが違うため、お互いのデータにはアクセスできません。

変数名が衝突しやすい。

同一オリジン内のアプリが複数あった場合、例えば version とかわかりやすい変数名（ローカルストレージのキー名）を両方が使った場合、後から実行した物で上書きされます。

Comments

[newyee]

ご回答いただきありがとうございます。
オリジンは、「スキーム+ホスト名+ポート番号」ですよね。勘違いしていました。
貼って貰いました、URL参考にさせて頂きます。