HTML5のLocal Storageを使ってはいけない（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Randall Degges - Please Stop Using Local Storage 原文公開日: 2018/01/26 著者: Randall Degges 日本語タイトルは内容に即したものにしました。 画像は元記事からの引用です。 初版公開: 2019/10/19 追記更新: 2024/04/05 -- リンク情報を記事末尾に移動しました 本気で申し上げます。local storageを使わないでください。 local storageにセッション情報を保存する開発者がこれほど多い理由について、私にはさっぱり見当がつきません。しかしどんな理由であれ、その手法は地上から消えてなくなってもらう必要がありますが、明らかに手に負えなくなりつつあります。 私は毎日のように、重要なユーザー情報をlocal storageに保存す
はじめに 最近、Webの記事を見てるとReactだVue.jsばかりが上がっていてJSPやERBの話をしてる人は誰もいません。jQueryの記事ももちろん見ない。 つまり、Webだけ見る限りではほとんどの人がSPAを使ってるように見えます。 私はWeb界隈には居るもののどちらかというとバックエンド寄り、もっというとそもそもWebとか関係ない領域を見る事が多いので、ちょっとキャッチアップを兼ねていくつかの個人プロダクトにVue.jsを採用してみました。 jQueryくらいで頭が止まってたので。サーバサイドもマイクロサービスでAPI化が進んでるのでフロントもそれに合った技術を選ばないとですしね。 というわけで、今回はその中で得た知見というか、従来型のサーバサイドでのWeb開発をしていた人の視点でVue.jsをキャッチアップする流れで書いていきたいと思います。 まあ最終的な結論は正直「これすごく
おはようございます、ritou です。 qiita.com これの初日です。 なんの話か 皆さんは今まで、こんな記事を目にしたことがありませんか？ Cookie vs JWT 認証に JWT を利用するのってどうなの？ JWT をセッション管理に使うべきではない！ リンク貼るのは省略しますが、年に何度か見かける記事です。 個人的にこの話題の原点は最近 IDaaS(Identity as a Service) として注目を集めている Auth0 が Cookie vs Token とか言う比較記事を書いたことだと思っていますが、今探したところ記事は削除されたのか最近の記事にリダイレクトされてるようなのでもうよくわからん。 なのでそれはおいといて、この話題を扱う記事は クライアントでのセッション管理 : HTTP Cookie vs WebStorage(LocalStorage / Sess
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!ニュース を担当しているエンジニアの喜楽です。 今回は、Yahoo!ニュースが取り組んでいるブラウザバック時の表示最適化手法について紹介します。 なぜブラウザバック時の挙動に注目するのか ユーザーがYahoo!ニュースのページを閲覧し、別のページに遷移する方法は大きく分けて以下の2つが考えられます。 （A） リンクをたどってページを遷移する （B） ブラウザーのナビゲーションボタンまたはスワイプ操作によって遷移する 「戻る」による遷移（ブラウザバック） 「進む」による遷移（ブラウザフォワード） Yahoo!ニュースでは総PVのうち一定程度が(B)のブラウザバックまたはブラウザフォワードによるページ遷移時のも
サマリ CookieやlocalStorage等でセッション管理しているウェブサイトがクリックジャッキング対策していない場合、どの条件で被害を受けるかを説明する。SameSite属性のないCookieでセッション管理しているウェブサイトは、主要ブラウザのデフォルト設定ではクリックジャッキングの影響を受けない。一方、loaclStorageにトークン類を格納するウェブサイトでは、Google Chrome等のブラウザでクリックジャッキングの影響がある。また、ブラウザの設定を変更した場合の影響についても説明する。 クリックジャッキングとは クリックジャッキングとは、一言で説明すると「ウェブサイト利用者に意図しないクリック（タップ）をさせる」攻撃です。ウェブサイト上で意図しないクリックを勝手にさせられると、重大な結果になる場合があります。例えば、このURLを閲覧すると、以下のようにTwitter
This blog post covers several enhancements to Intelligent Tracking Prevention (ITP) in iOS and iPadOS 13.4 and Safari 13.1 on macOS to address our latest discoveries in the industry around tracking. Cookies for cross-site resources are now blocked by default across the board. This is a significant improvement for privacy since it removes any sense of exceptions or “a little bit of cross-site track
SQLiteの公式Webサイトに、SQLite3をWebAssembly化した「SQLite3 WASM/JS」プロジェクトのページが公開されました。 これまでさまざまなWebAssembly版SQLiteの試みが行われてきたなかで、初めてSQLiteの正式なサブプロジェクトとして開発されるWebAssembly版SQLiteになります。 下記はドキュメント「About the sqlite3 WASM/JS Subproject」からの引用です。 this subproject is the first effort "officially" associated with the SQLite project, created with the goal of making WASM builds of the library first-class members of the fa
偽のセキュリティ警告画面(サポート詐欺)が表示される仕組み - NTT Communications Engineers' Blog
みなさんこんにちは、イノベーションセンターの益本(@masaomi346)です。 Network Analytics for Security (以下、NA4Sec) プロジェクトのメンバーとして、脅威インテリジェンス(潜在的な脅威について収集されたデータを収集・分析したもの)の分析をしています。 最近、広告から偽のセキュリティ警告画面に飛ばされる事例が目立っています。 本記事では、偽のセキュリティ警告画面が表示される仕組みについて、実際に使われているツールを使って紹介していきます。 ぜひ最後まで読んでみてください。 NA4Secについて 「NTTはインターネットを安心・安全にする社会的責務がある」を理念として、インターネットにおける攻撃インフラの解明・撲滅を目指した活動をしているプロジェクトです。 NTT Comグループにおける脅威インテリジェンスチームとしての側面も持ち合わせており、有
The Ultimate Guide to handling JWTs on frontend clients (GraphQL) JWTs (JSON Web Token, pronounced 'jot') are becoming a popular way of handling auth. This post aims to demystify what a JWT is, discuss its pros/cons and cover best practices in implementing JWT on the client-side, keeping security in mind. Although, we’ve worked on the examples with a GraphQL clients, but the concepts apply to any
普段使わないけど便利なWeb API 8選
MDNのWeb APIリストから、便利で、しかし普段のサービス開発ではあまり使われていない可能性のあるAPIを8個選びご紹介します。これらのAPIはあまり知られていないかもしれませんが、特定の状況や要件に対して非常に有効であることがあります。 Beacon API Beacon APIは、非同期でブロッキングしないリクエストをWebサーバーに送信するために使用されます。このリクエストはレスポンスを期待しないため、XMLHttpRequestやFetch APIを使ったリクエストとは異なりページがアンロード(ウェブページがユーザーによって閉じられるか、別のページに移動する際)される前にブラウザがビーコンリクエストを開始し、それを完了させることを保証します。 主な使用例としては、クライアント側のイベントやセッションデータをサーバーに送信するために使用されます。このAPIは、navigator.
ある日の我が家 娘（４歳）「パパ、セッションとかCookieってなあに？」 娘「サーバサイドの勉強してると出てくるやつ」 ワイ「おお、今日はその質問か」 ワイ「ええでええで〜、パパが教えたるで〜」 娘「わ〜い！」 ワイ「ワ〜イ！」 例えば月曜日 ワイ「例えば、月曜日の朝は仕事する気にならへんからTwitterを見るやろ？」 娘「うん！」 ワイ「せやからTwitterのホーム画面を見るために」 ワイ「ブラウザのアドレスバーにhttps://twitter.com/homeって打ち込むんや」 ワイ「まぁ実際にはブックマークから行くんやけど、まぁ同じことや」 ワイ「つまりブラウザ君を通して、サーバ君に」 「ワイのTwitterのホーム画面のHTMLをくれや〜」 ワイ「ってことを伝える訳や」 娘「うんうん」 ワイ「でもな？」 ワイ「それもCookieを使ってセッション管理をせんと実現できひんことや
作成日 2023-02-28 更新日 2023-02-28 author @bokken_ tag Clear-Site-Data, storage, Cookie はじめに Clear-Site-Data というクライアントサイドのデータを削除するための仕様がある。提案自体は2015年頃からある仕様だが、最近 Safari の Beta Release にリリースされ、もうすぐ主要ブラウザで実装が出揃う形になる。¶ この記事では、Clear Site Data とはどういう仕様なのかをまとめる。¶ Clear Site Data とは Web アプリケーションでは、オフライン時にも利用できるようにリソース (データ) をキャッシュしたり、パフォーマンスを高めるため、 local マシンにリソース (データ) を保持することがある。また、サービスをログインするのに Cookie にセッショ
スティッキーセッションを使っていなければApplication Load Balancer障害に耐えれたかも？？？ Amazon EC2をステートレスにする為にやるべきこと | DevelopersIO
スティッキーセッションを使っていなければApplication Load Balancer障害に耐えれたかも？？？ Amazon EC2をステートレスにする為にやるべきこと セッション管理が必要なWebアプリケーションを使う場合でも､スティッキーセッションを利用しない方法を説明します｡また､ログをインスタンス内に保持しない方法やAuto Scaling化についても触れています｡ はじめに おはようございます､加藤です｡煽り気味なタイトルで申し訳ございません､念の為より詳細に記載しますが､スティッキーセッションを使っていなければApplication Load Balancer障害の影響を受けるのを防げたかもしれないという内容です｡ 今後同様の障害への対処として､このブログの対応は行う価値がありますが､これだけやっておけばOKという事では無い事をご理解ください｡ 2019年8月23日にAWS
アドベントカレンダーの担当日を早めにしてさっさと終わらせてしまえば気持ちが楽だと思ったのに前日になっても書き終わっていないのは一体誰でしょう？そう、私(ふそやん@azihsoyn)です。 こちらの記事は Gunosy Advent Calendar 2020 の2日目の記事です。 昨日の記事はかとうさんの 長年稼働しているサービスの全体感をすばやく把握するには でした。 さて、先日プレスリリースでも発表されましたが、グノシーにラジオコーナーが出来ました。 現在ラジオコーナーにはオリジナル番組と、他社の提供するPodcastの2つのコンテンツがあるのですが、オリジナルコンテンツを入稿するための管理画面をFlutter Webで作ったのでその知見をまとめたいと思います。 管理画面の主な機能は、 コンテンツのCRUD(GraphQL) 番組管理(CRUD) 番組に紐付くエピソード管理(CRUD)
TinyBase
Start with a simple key-value store.Creating a Store requires just a simple call to the createStore function. Once you have one, you can easily set Values in it by unique Id. And of course you can easily get them back out again. Read more about using keyed value data in The Basics guide. const store = createStore() .setValues({employees: 3}) .setValue('open', true); console.log(store.getValues());
ブラウザバックしたときに状態を復元する（Vue3, Nuxt3 そして Next.js） - Qiita
ブラウザバックは Web アプリの鬼門 Vue に限らずですが、Web アプリにおいてブラウザでバックボタンやフォワードボタンの実行に対応するのはなかなかに難しい問題です。そのため、POST Back 型のフレームワークではブラウザバックの使用自体を禁止することも多かったと思います。 SPA全盛の今、この問題は解決されたのでしょうか。 いえ、状況はむしろ悪化しています。テンプレートエンジンを使った HTML 生成型の Web サイトであれば、ブラウザバックを行うことで、フォームの値とスクロール位置は復元されますが、JavaScript ベースで構築された画面ではフォームの値は保存されませんし、スクロール位置が復元できるかも条件次第です。 一般的な解決策 では、Twitter に代表されるSPAアプリではこの問題にどうやって対応しているのでしょうか。答えは「対応しない（あるいはスクロール位置
UI = f(statesⁿ)
“UI is a function of state” is a pretty popular saying in the front-end world. In context (pun intended), that’s typically referring to application or component state. I thought I’d pull that thread a little further and explore all the states that can effect the UI layer… First-party application states Every application whether it’s a to-do list or a shopping cart or some radically complex app wil
WebAssembly, a.k.a. WASM, is a standard defining a low-level programming language suitable (A) as a target for cross-compilation from many other languages and (B) for running via a virtual machine in a browser. Designed with scriptability via JavaScript in mind, it provides a way to compile C code (among others) to WASM and script it via JavaScript with relatively little friction despite the vast
Have you ever wondered how web compatible Deno is? Probably not, but I did today. To answer that question, I am writing this blog post: I’ll list and explain every single web API implemented in Deno. Get yourself something to drink, because this is going to take a while to go through. Before we get into it though, I just want to set some ground rules: I am not including any JS language features. O
DiscMaster
home *** CD-ROM | disk | FTP | other *** search CLICK HERE TO SEARCH Experimental website to browse and search vintage computer files from archive.org This page has been visited times. new stuff and site news! discmaster 2??? Stats 599,521,811 files from 26,052 items, totaling 51.3TB image: 261,931,551 text: 159,122,876 unknown: 68,961,006 other: 33,432,911 executable: 20,910,219 archive: 19,7
Auth0の設定を反映 事前にAuth0のアカウントやアプリケーションの用意が必要となります。アプリケーションの設定画面より下記情報をあらかじめ取得し環境変数として諒するために.envファイルとしてプロジェクトルートへ用意しておいてください。 新規にAuth0の環境を用意される場合はは下記記事が参考になると思います。 .env AUTH0_RETURN_TO_URL=http://localhost:3000 AUTH0_CALLBACK_URL=http://localhost:3000/callback AUTH0_CLIENT_ID=clientID AUTH0_CLIENT_SECRET=clientSecret AUTH0_DOMAIN=******.jp.auth0.com AUTH0_LOGOUT_URL=https://******.jp.auth0.com/v2/logo
Private Browsing 2.0
When we invented Private Browsing back in 2005, our aim was to provide users with an easy way to keep their browsing private from anyone who shared the same device. We created a mode where users do not leave any local, persistent traces of their browsing. Eventually all other browsers shipped the same feature. At times, this is called “ephemeral browsing.” We baked in cross-site tracking preventio
Tracking Prevention in WebKit
ContentsTerminologyThe Default Cookie PolicyPrivate Browsing ModePartitioned Third-Party StoragePartitioned Service WorkersPartitioned Third-Party HTTP CacheAnti FingerprintingIntelligent Tracking Prevention (ITP) WebKit has implemented tracking prevention technologies, spanning from 2003 with Safari 1.0 until today. Most of them are on by default. This document describes shipping behavior includi
@aki_yok さんの DRF本 レビューをしていて Preflight について記述があったんですが、 自分が しっかり理解できていないような気がしたので CORS を絡めて簡単にまとめてみました。 昔話 👹はるか昔 🐉 XMLHttpRequest (以降 XHR という) により私達は非同期通信を手に入れました。 XMLHttpRequest - Web API | MDNXMLHttpRequest (XHR) オブジェクトは、サーバーと対話するために使用されます。ページ全体を更新する必要なしに、データを受け取ることができます。これでユーザーの作業を中断させることなく、ウェブページの一部を更新することができます。https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest しかし、この便利機能は その強力さ故に 同一
Deprecating and removing Web SQL | Blog | Chrome for Developers
The Web SQL Database API, which allows you to store data in a structured manner on the user's computer (internally based on the SQLite database engine), was introduced in April 2009 and abandoned in November 2010. While it was implemented in WebKit (which powers Safari) and remained active in the Blink engine (which powers Chrome), Gecko (which powers Firefox) never implemented this feature and We
Using localStorage in Modern Applications: A Comprehensive Guide When it comes to client-side storage in web applications, the localStorage API stands out as a simple and widely supported solution. It allows developers to store key-value pairs directly in a user's browser. In this article, we will explore the various aspects of the localStorage API, its advantages, limitations, and alternative sto
WebAssembly, a.k.a. WASM, is a standard defining a low-level programming language suitable (A) as a target for cross-compilation from many other languages and (B) for running via a virtual machine in a browser. Designed with scriptability via JavaScript in mind, it provides a way to compile C code (among others) to WASM and script it via JavaScript with relatively little friction despite the vast
この記事は「Svelteで始める頑張らないフロントエンド生活 前編」の続きです。読み進める前に、先にそちらをご覧ください。 前編のおさらい 「Svelteで始める頑張らないフロントエンド生活 前編」ではSvelteの基本的な使い方を学びました。 Svelteでは、変数のバインド、コンポーネントの作成、分岐表示処理などを簡単に実現することができました。Svelteは他のフレームワークほど強力な機能を持っているわけではありませんが、シンプルなアプリを作る際には心強い機能を提供してくれます。 今回作るもの ノートアプリ Svelteの基本的な使い方については習得したので、今回はノートアプリを作ってみましょう。以下のようなイメージです： シンプルですが、ウェブアプリを作る上で重要なことを制作過程で学べます。 Single Page Application(SPA) Single Page Appl
はじめに こんにちは！株式会社iimonでフロントエンドエンジニアをしている「みよちゃん」です！ 本記事は株式会社iimonアドベントカレンダー15日目です！ 弊社では不動産仲介業者向けのサービスを開発しています。 私が所属しているチームでは、chromeの拡張機能を開発しており、IndexeDBを使用する機会が多くあります。 今回は普段使用するIndexedDBについて調べたことを以下にまとめていきたいと思います！ IndexedDB 1. IndexedDBとは IndexedDBとはブラウザに実装されているデータベースの機能です。ブラウザ内で処理を完結させることができるので、通信が発生せずオフラインの状態でも使用することができます。データベースはRDB(Relational Database)ではなくキーバリューストアです。 2. ブラウザが持つほかのデータ管理機能との違い ブラウザ
Safariのエンジン・WebKitが「プライベートブラウジング 2.0」と題しさらなる機能強化、AppleもSafariをChromeと比較しプライバシーを強調
ウェブサイト閲覧後に履歴やCookieなどの記録を自動で削除し、プライバシーに関する情報を保護するウェブブラウザの機能が「プライベートブラウジング」です。このプライベートブラウジングは2005年にMac OS X バージョン10.4 TigerのSafariに初めて搭載された機能ですが、Appleがさらに進化させた新たなプライベートブラウジングを「プライベートブラウジング 2.0」と題してアピールしています。 Private Browsing 2.0 | WebKit https://webkit.org/blog/15697/private-browsing-2-0/ Safari 17.0から追加された新しいプライベートブラウジングの主な特徴がリンクトラッキング保護です。これは、ウェブサイト間の移動時にURLから追跡情報を削除する機能です。また、既知のトラッカーへのネットワーク接続を自
Single Page Application (SPA) から呼び出すバックエンドAPIの認証トークンの管理方法について、Web上の文献やライブラリの実装を調査して、自分の考えを整理した。 前提 本記事はSPAにおいてバックエンド認証に使うトークンの管理方法（典型的にはLocal Storageに保管してよいか？Cookieを使うべきか？など）についての考察となる。認証トークンの仕組み（ステートフル vs ステートレス）については言及していない。 ブラウザにはAndroidのKeyStoreのような仕組み（暗号化され、取得時に端末の認証が必要となるストレージ）がないという批判があるが、これも考慮から外している。（つまり、システム管理者やPCの共同利用者がCookie/Local Storageを参照して…というリスクについては考えていない。） 考察 まず、そもそもの原因となるXSS脆弱性
はじめに Blazor が .NET Core 3.1 の頃に出てきて、Single Page Application を C# + HTML/CSS + ちょっとのJavaScript で作れる技術という立ち位置で .NET 5 頃までいました。 そこから Blazor Hybrid や .NET 8 で Blazor United という俗称で呼ばれる新しい Blazor の形が出てきました。 正直、のほほーんと外から Blazor を眺めているだけだと何が何だかわからない状態だと思うので、.NET 8 時点での Blazor の形を整理してみようと思います。今回は基本的に整理するだけで、実際にコードとしてどのように実装するのかといった所までは踏み込みません。個々の詳細についてはドキュメントなどを参照してください。 関連するドキュメントや私の記事などは、関係する説明の途中にリンクを貼っ
SPA(Vue + RailsAPI)で何とかログイン認証機能 + CSRF対策を実装したので、ブログにメモしておきます。 実装の概要 使用した技術たち JWT(JsonWebToken) アクセストークン、リフレッシュトークンって？ WebStorage JWTSession 遷移の概要(より正確な内容は要Gem参照) トークンストアの設定 バックエンド側の仕事 Signinコントローラー フロントエンド側の仕事 axiosのインスタンスの作成 main.jsでインスタンスの読み込み インスタンスの使用方法 ただ、ブラウザによって上手く動作しないものが… 3rd party cookiesとは？ 余談 実装の概要 今回は、JWT + (WebStorage + Cookie）を使って実装しました。（後に用語説明します） WebStorageとJWTによるセッションの管理（ログイン状態の管
Googleフォントを高速で読み込む！非同期で読み込む方法とpreload記述の方法について紹介。 - もぐもぐ食べるおいしいWebデザイン。 - もぐでざ
サイトの表示速度早くしたい〜〜まずはここでで自分のサイトを確認してみよう😊 PageSpeed Insights 何点でしたか？70点以上ならとりあえず一安心。 私は悲しいことに50点でした(T_T) 今回は、PageSpeed Insightsの「レンダリングを妨げるリソースの除外」を改善したい！Google Font編です。 レンダリングブロックって何？ レンダリング＝読み込んで表示すること レンダリングブロック＝読み込んで表示するのをブロック！ 一般的なブラウザは、<head>内で指定されたファイルの読み込みが終わるまで<body>を表示しないのです。 表示されない→閲覧者にとっては真っ白な画面を見続けることになってしまいます。 できるだけ避けたい事案ですね(T_T) Googleフォントを早く読み込みたい当ブログ「もぐでざ」はアルファベットにGoogleフォント「Montserr
WebStorageのセキュリティに関する重要な考慮点と対策 - 開発者が知っておくべきこと - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
初学者様向けのJavaScriptでWebストレージを使用する上でのセキュリティ(安全性)などの基本的な知識を解説致します。 プロジェクト構築の過程で、権限認証のトークン、ユーザー情報、埋め込みポイントの数、スキン情報、顧客が構成した言語タイプなどの情報をローカルに保存する必要がある状況に遭遇することがよくあります。 一時的に保存して、不要なリクエストやブラウザの冗長な操作を避け、お客様の利便性を高めます。 その際に、データベースの複雑さを増すことなく、HTMLで何かを成し遂げたい場合があります。 クライアントによってローカルにデータを保存する新しい方法を提供します。 それはWebストレージとなります またWebストレージは、LocalStorageとSessionStorageに分けられJavaScriptでアクセス可能です。 サーバーではなくブラウザにキーと値のペアで保存できます。 ※
Auth0 Marketplace Discover and enable the integrations you need to solve identity Explore Auth0 Marketplace I recently gave a talk at OWASP Virtual AppSecIL 2020 on “Security Facts and Fallacies about Browser Storage,” where I presented the different browser storage options and the security guarantees they offer. When talking about browser storage and security, the top 1 concern is an XSS vulnerab
ユニットテストの書き方メモ。 サンプルコードのテストランナーはJestです。 jest.config.js ルートにおいとけばとりあえず動くと思うコンフィグ。 testEnviromentはjest-environment-jsdom-global、 アセットのスタブにjest-transform-stubを利用する。 const path = require('path'); module.exports = { verbose: false, // 実行中に各テストを報告するかどうか testPathIgnorePatterns: [ '/node_modules/' ], moduleFileExtensions: ['json', 'js', 'vue'], transform: { '^.+\\.js$': 'babel-jest', '.*\\.(vue)$': 'vue-je
![[Vue/Nuxt] Vue Test Utils の コードスニペット集](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
ReactフックでlocalStorageを使用する方法 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
このチュートリアルでは、ローカルストレージにアクセスし、それを使用してアプリケーションの状態を保存する方法を説明します。 ※前提条件として、Reactの概念およびReactフックの基本を理解していることを確認してください。 Webストレージとは フォームコンポーネントの作成 フォーム入力をlocalStorageに保存 localStorageに保存されたデータの削除 カスタムフックとしてカプセル化 データ検証とエラー処理 localStorageでuseEffectフックを使用 getItem()でデータの読み取り 最後に ユーザーからユーザー名とパスワードを受け取り、それをユーザーのコンピュータのlocalStorageにデータとして保存するReactアプリケーションを構築します。 Webストレージとは 2つの主要なWebストレージメカニズムがあります。 React localStor
Piniaとは PiniaはVue用のState Managementライブラリで複数のコンポーネントでデータを共有するために利用することができます。アプリケーションの中にStoreという場所を準備しその中にコンポーネント間で共有の必要があるデータを保存していきます。またデータを保存するだけではなくデータを更新する機能も備えています。 Piniaによるデータ管理のイメージ Vueプロジェクトの作成 Piniaを利用するためにVueのプロジェクトの作成を行います。本文書ではViteでプロジェクトを作成後にnpmコマンドでpiniaのインストールを行います。 viteではなくnpm init vue@latestコマンドを利用するとプロジェクトの作成と同時にpiniaをインストールすることもできます。 Viteによるインストール npm init viteコマンドを実行してVueのプロジェクト
HTML・CSSのコードHTML・CSSのコードは以下となります。また、CSSではリセットCSSを利用しています。 See the Pen Nature Remo Browser by yic666kr (@yic666kr) on CodePen. 上記コードではリモコン送信が成功した際に、ページ左上にある固定された箇所をCSSで点滅させています。 CSSで要素を点滅させる方法については以下のリンク先を参考にしてみてください。 エアコンのリモコンボタンエアコンのリモコンボタン・プルダウンメニューの場合、button要素とoption要素のvalueの値には、エアコンのリモコンボタン情報となる、JSON内のキーairconにあるデータをそれぞれ指定します。 テレビのリモコンボタンテレビのリモコンボタンの場合、valueの値には、テレビのリモコンボタン情報となる、JSON内のキーbutton
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レガシーおじさん、SPAを始めてみた。そして限界を知る
Webアプリケーションのセッション管理にJWT導入を検討する際の考え方 - r-weblife
ブラウザバック時の表示を最適化する Yahoo!ニュースの取り組み事例
2023年4月においてクリックジャッキング未対策のサイトはどの条件で被害を受けるか
Full Third-Party Cookie Blocking and More
SQLiteの正式なWebAssembly版「SQLite3 WASM/JS」が登場
The Ultimate Guide to handling JWTs on frontend clients (GraphQL)
4歳娘「パパ、セッションとCookieってなあに？」 - Qiita
クライアントの Cookie などのデータを削除する Clear Site Data という仕様について
管理画面にGraphQL + Flutter Webを採用してみた - Gunosy Tech Blog
About the sqlite3 WASM/JS Subproject
A list of every web API in Deno
RemixにAuth0認証を組み込んでみた | DevelopersIO
CORS とか Preflight とかよくわかんないよな
Using localStorage in Modern Applications - A Comprehensive Guide | RxDB - JavaScript Database
About the sqlite3 WASM/JS Subproject
Svelteで始める頑張らないフロントエンド生活 後編
IndexedDBの基本を学ぶ - iimon TECH BLOG
SPAでのバックエンド認証用トークンの管理方法に関する考察 - Qiita
.NET 8 での Blazor を整理整頓して理解しよう
SPAでのログイン認証とCSRF対策の実装(JWT使用) - Web備忘録
Secure Browser Storage: The Facts
[Vue/Nuxt] Vue Test Utils の コードスニペット集
Vue.js Piniaを使って状態管理(データの共有)を行ってみよう | アールエフェクト
【Nature Remo】PCやスマホのブラウザから家電リモコンを操作する方法｜Cloud API