Submit Search
Upload
HTML5 Local Storageを利用したメモ帳アプリ
•
1 like
•
1,383 views
Yossy Taka
Follow
講義用の資料です。 LocalStorageを利用したメモ帳アプリの解説です。 JSONの活用方法も説明しています。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 24
Recommended
Transitional devices
Transitional devices
Vergil Ace Dela Peña
Descriptive writing
Descriptive writing
Kylie Sarmiento
Prep 1 "Great Wonderful World" Poem
Prep 1 "Great Wonderful World" Poem
Sawsan Ali
Prohibition modals 2021 2022
Prohibition modals 2021 2022
MaricelGarlitos4
CONTEXT APPROACHES 4.pptx
CONTEXT APPROACHES 4.pptx
veronikadevina
Irony identifying the three types
Irony identifying the three types
abscessmemory
Eng9 transitional devices
Eng9 transitional devices
Tine Lachica
English2.8(signal words)
English2.8(signal words)
Eemlliuq Agalalan
Recommended
Transitional devices
Transitional devices
Vergil Ace Dela Peña
Descriptive writing
Descriptive writing
Kylie Sarmiento
Prep 1 "Great Wonderful World" Poem
Prep 1 "Great Wonderful World" Poem
Sawsan Ali
Prohibition modals 2021 2022
Prohibition modals 2021 2022
MaricelGarlitos4
CONTEXT APPROACHES 4.pptx
CONTEXT APPROACHES 4.pptx
veronikadevina
Irony identifying the three types
Irony identifying the three types
abscessmemory
Eng9 transitional devices
Eng9 transitional devices
Tine Lachica
English2.8(signal words)
English2.8(signal words)
Eemlliuq Agalalan
Eng9 changing direct speech to reported speech
Eng9 changing direct speech to reported speech
Tine Lachica
Modals - Permission
Modals - Permission
theLecturette
Descrpitive Pargraph
Descrpitive Pargraph
Shafira Aulia
G7 Demo Logical Connectors
G7 Demo Logical Connectors
Venus Patual
Cohesive Devices
Cohesive Devices
ssuserff4a21
9 modals
9 modals
EDIN BROW, DCE, AMET
Paragraph writing the abc's of paragraphs
Paragraph writing the abc's of paragraphs
Yamith José Fandiño Parra
Lesson 1 creative writing
Lesson 1 creative writing
jamiejanelback2
logical concetors.pptx
logical concetors.pptx
TeacherEllaEnglisera
Text Types
Text Types
Karisse Ramoso
GRADE-9-ENGLISH-Q3-W4-Determine-Tone-and-Mood.ppt
GRADE-9-ENGLISH-Q3-W4-Determine-Tone-and-Mood.ppt
kylemareborda
Using conditional-in-expressing-arguments
Using conditional-in-expressing-arguments
JohnSmith5397
Linking words
Linking words
Eprojectxxx2
WEEK 1 Affirming and Negating Words and Expressions.pptx
WEEK 1 Affirming and Negating Words and Expressions.pptx
AprilJoyMangurali1
TECHNICAL TERMS IN RESEARCH.pptx
TECHNICAL TERMS IN RESEARCH.pptx
Eliza Jeresano
Modals expressing permission
Modals expressing permission
ADELUISA SANTIAGO-CALMA
Direct and Indirect speech
Direct and Indirect speech
Ming-Ming Bunsoy, MALED
Irony (types of irony)
Irony (types of irony)
Jareleny Nava
Imaginative writing
Imaginative writing
rachel1234567890
Gerund
Gerund
mercy lou clarito
JavaScriptによるvideo audio要素のコントロール入門
JavaScriptによるvideo audio要素のコントロール入門
Yossy Taka
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
Yossy Taka
More Related Content
What's hot
Eng9 changing direct speech to reported speech
Eng9 changing direct speech to reported speech
Tine Lachica
Modals - Permission
Modals - Permission
theLecturette
Descrpitive Pargraph
Descrpitive Pargraph
Shafira Aulia
G7 Demo Logical Connectors
G7 Demo Logical Connectors
Venus Patual
Cohesive Devices
Cohesive Devices
ssuserff4a21
9 modals
9 modals
EDIN BROW, DCE, AMET
Paragraph writing the abc's of paragraphs
Paragraph writing the abc's of paragraphs
Yamith José Fandiño Parra
Lesson 1 creative writing
Lesson 1 creative writing
jamiejanelback2
logical concetors.pptx
logical concetors.pptx
TeacherEllaEnglisera
Text Types
Text Types
Karisse Ramoso
GRADE-9-ENGLISH-Q3-W4-Determine-Tone-and-Mood.ppt
GRADE-9-ENGLISH-Q3-W4-Determine-Tone-and-Mood.ppt
kylemareborda
Using conditional-in-expressing-arguments
Using conditional-in-expressing-arguments
JohnSmith5397
Linking words
Linking words
Eprojectxxx2
WEEK 1 Affirming and Negating Words and Expressions.pptx
WEEK 1 Affirming and Negating Words and Expressions.pptx
AprilJoyMangurali1
TECHNICAL TERMS IN RESEARCH.pptx
TECHNICAL TERMS IN RESEARCH.pptx
Eliza Jeresano
Modals expressing permission
Modals expressing permission
ADELUISA SANTIAGO-CALMA
Direct and Indirect speech
Direct and Indirect speech
Ming-Ming Bunsoy, MALED
Irony (types of irony)
Irony (types of irony)
Jareleny Nava
Imaginative writing
Imaginative writing
rachel1234567890
Gerund
Gerund
mercy lou clarito
What's hot
(20)
Eng9 changing direct speech to reported speech
Eng9 changing direct speech to reported speech
Modals - Permission
Modals - Permission
Descrpitive Pargraph
Descrpitive Pargraph
G7 Demo Logical Connectors
G7 Demo Logical Connectors
Cohesive Devices
Cohesive Devices
9 modals
9 modals
Paragraph writing the abc's of paragraphs
Paragraph writing the abc's of paragraphs
Lesson 1 creative writing
Lesson 1 creative writing
logical concetors.pptx
logical concetors.pptx
Text Types
Text Types
GRADE-9-ENGLISH-Q3-W4-Determine-Tone-and-Mood.ppt
GRADE-9-ENGLISH-Q3-W4-Determine-Tone-and-Mood.ppt
Using conditional-in-expressing-arguments
Using conditional-in-expressing-arguments
Linking words
Linking words
WEEK 1 Affirming and Negating Words and Expressions.pptx
WEEK 1 Affirming and Negating Words and Expressions.pptx
TECHNICAL TERMS IN RESEARCH.pptx
TECHNICAL TERMS IN RESEARCH.pptx
Modals expressing permission
Modals expressing permission
Direct and Indirect speech
Direct and Indirect speech
Irony (types of irony)
Irony (types of irony)
Imaginative writing
Imaginative writing
Gerund
Gerund
Viewers also liked
JavaScriptによるvideo audio要素のコントロール入門
JavaScriptによるvideo audio要素のコントロール入門
Yossy Taka
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
Yossy Taka
スマホアプリ開発-プロモーション・集客・サポート・広告収入-
スマホアプリ開発-プロモーション・集客・サポート・広告収入-
Yossy Taka
Ajax非同期通信によるサーバー通信
Ajax非同期通信によるサーバー通信
Yossy Taka
JavaScriptによるgoogle maps apiの使い方
JavaScriptによるgoogle maps apiの使い方
Yossy Taka
JavaScriptのオブジェクト:Mathオブジェクト、Dateオブジェクト
JavaScriptのオブジェクト:Mathオブジェクト、Dateオブジェクト
Yossy Taka
Canvas入門01-図形描画とJS活用-
Canvas入門01-図形描画とJS活用-
Yossy Taka
Javascript入門-デジタル時計を作りながらJavaScriptを学ぼう-
Javascript入門-デジタル時計を作りながらJavaScriptを学ぼう-
Yossy Taka
JavaScript 基礎文法のまとめ
JavaScript 基礎文法のまとめ
Yossy Taka
Canvasでペイントアプリ作成
Canvasでペイントアプリ作成
Yossy Taka
JavaScript Basic 02 jQuery
JavaScript Basic 02 jQuery
Yossy Taka
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門
Atsushi Tadokoro
2時間で学ぶjQuery
2時間で学ぶjQuery
Shumpei Shiraishi
jQueryで気をつけてほしいこと
jQueryで気をつけてほしいこと
良太 増子
WebデザイナのためのjQuery入門。
WebデザイナのためのjQuery入門。
Yossy Taka
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
schoowebcampus
漢は黙ってjQuery
漢は黙ってjQuery
Takuma Hanatani
What Makes Great Infographics
What Makes Great Infographics
SlideShare
Masters of SlideShare
Masters of SlideShare
Kapost
STOP! VIEW THIS! 10-Step Checklist When Uploading to Slideshare
STOP! VIEW THIS! 10-Step Checklist When Uploading to Slideshare
Empowered Presentations
Viewers also liked
(20)
JavaScriptによるvideo audio要素のコントロール入門
JavaScriptによるvideo audio要素のコントロール入門
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
スマホアプリ開発-プロモーション・集客・サポート・広告収入-
スマホアプリ開発-プロモーション・集客・サポート・広告収入-
Ajax非同期通信によるサーバー通信
Ajax非同期通信によるサーバー通信
JavaScriptによるgoogle maps apiの使い方
JavaScriptによるgoogle maps apiの使い方
JavaScriptのオブジェクト:Mathオブジェクト、Dateオブジェクト
JavaScriptのオブジェクト:Mathオブジェクト、Dateオブジェクト
Canvas入門01-図形描画とJS活用-
Canvas入門01-図形描画とJS活用-
Javascript入門-デジタル時計を作りながらJavaScriptを学ぼう-
Javascript入門-デジタル時計を作りながらJavaScriptを学ぼう-
JavaScript 基礎文法のまとめ
JavaScript 基礎文法のまとめ
Canvasでペイントアプリ作成
Canvasでペイントアプリ作成
JavaScript Basic 02 jQuery
JavaScript Basic 02 jQuery
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門
2時間で学ぶjQuery
2時間で学ぶjQuery
jQueryで気をつけてほしいこと
jQueryで気をつけてほしいこと
WebデザイナのためのjQuery入門。
WebデザイナのためのjQuery入門。
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
漢は黙ってjQuery
漢は黙ってjQuery
What Makes Great Infographics
What Makes Great Infographics
Masters of SlideShare
Masters of SlideShare
STOP! VIEW THIS! 10-Step Checklist When Uploading to Slideshare
STOP! VIEW THIS! 10-Step Checklist When Uploading to Slideshare
Similar to HTML5 Local Storageを利用したメモ帳アプリ
20110519 okuyama tokyo_linuxstudy
20110519 okuyama tokyo_linuxstudy
Takahiro Iwase
Core Data
Core Data
Kosuke Matsuda
MongoDBを用いたソーシャルアプリのログ解析 〜解析基盤構築からフロントUIまで、MongoDBを最大限に活用する〜
MongoDBを用いたソーシャルアプリのログ解析 〜解析基盤構築からフロントUIまで、MongoDBを最大限に活用する〜
Takahiro Inoue
GeckoのLocal Storageについて調べてみた
GeckoのLocal Storageについて調べてみた
Muneaki Nishimura
Chromeでストレージ永続化を実現するには
Chromeでストレージ永続化を実現するには
goccy
全文検索入門
全文検索入門
antibayesian 俺がS式だ
ななめ45°から見たJavaOne
ななめ45°から見たJavaOne
AdvancedTechNight
20121205 nosql(okuyama fs)セミナー資料
20121205 nosql(okuyama fs)セミナー資料
Takahiro Iwase
JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2
JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2
pandeiro245
Pbox on softlayer
Pbox on softlayer
Shuichi Yukimoto
Lombok ハンズオン
Lombok ハンズオン
Hiroto Yamakawa
Amazon RDS (MySQL) 入門
Amazon RDS (MySQL) 入門
Manabu Shinsaka
20110517 okuyama ソーシャルメディアが育てた技術勉強会
20110517 okuyama ソーシャルメディアが育てた技術勉強会
Takahiro Iwase
Windows azureを知ろう ロール&ストレージ編
Windows azureを知ろう ロール&ストレージ編
Chiho Otonashi
play framework 勉強会 in 関西
play framework 勉強会 in 関西
Shinichi Kozake
qpstudy 2014.04 ハードウェア設計の勘所
qpstudy 2014.04 ハードウェア設計の勘所
Takeshi HASEGAWA
Dragon: A Distributed Object Storage at Yahoo! JAPAN (WebDB Forum 2017)
Dragon: A Distributed Object Storage at Yahoo! JAPAN (WebDB Forum 2017)
Yahoo!デベロッパーネットワーク
コンテキストデータの永続化のための戦略
コンテキストデータの永続化のための戦略
fisuda
dstn交流会_DataSpider のソーシャルとの融合、手組との融合
dstn交流会_DataSpider のソーシャルとの融合、手組との融合
dstn
HTML5でオフラインWebアプリケーションを作ろう
HTML5でオフラインWebアプリケーションを作ろう
yoshikawa_t
Similar to HTML5 Local Storageを利用したメモ帳アプリ
(20)
20110519 okuyama tokyo_linuxstudy
20110519 okuyama tokyo_linuxstudy
Core Data
Core Data
MongoDBを用いたソーシャルアプリのログ解析 〜解析基盤構築からフロントUIまで、MongoDBを最大限に活用する〜
MongoDBを用いたソーシャルアプリのログ解析 〜解析基盤構築からフロントUIまで、MongoDBを最大限に活用する〜
GeckoのLocal Storageについて調べてみた
GeckoのLocal Storageについて調べてみた
Chromeでストレージ永続化を実現するには
Chromeでストレージ永続化を実現するには
全文検索入門
全文検索入門
ななめ45°から見たJavaOne
ななめ45°から見たJavaOne
20121205 nosql(okuyama fs)セミナー資料
20121205 nosql(okuyama fs)セミナー資料
JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2
JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2
Pbox on softlayer
Pbox on softlayer
Lombok ハンズオン
Lombok ハンズオン
Amazon RDS (MySQL) 入門
Amazon RDS (MySQL) 入門
20110517 okuyama ソーシャルメディアが育てた技術勉強会
20110517 okuyama ソーシャルメディアが育てた技術勉強会
Windows azureを知ろう ロール&ストレージ編
Windows azureを知ろう ロール&ストレージ編
play framework 勉強会 in 関西
play framework 勉強会 in 関西
qpstudy 2014.04 ハードウェア設計の勘所
qpstudy 2014.04 ハードウェア設計の勘所
Dragon: A Distributed Object Storage at Yahoo! JAPAN (WebDB Forum 2017)
Dragon: A Distributed Object Storage at Yahoo! JAPAN (WebDB Forum 2017)
コンテキストデータの永続化のための戦略
コンテキストデータの永続化のための戦略
dstn交流会_DataSpider のソーシャルとの融合、手組との融合
dstn交流会_DataSpider のソーシャルとの融合、手組との融合
HTML5でオフラインWebアプリケーションを作ろう
HTML5でオフラインWebアプリケーションを作ろう
More from Yossy Taka
WebサイトへのYotutube動画の設置
WebサイトへのYotutube動画の設置
Yossy Taka
Bracketsを使おう
Bracketsを使おう
Yossy Taka
canvasによるアナログ時計の作成
canvasによるアナログ時計の作成
Yossy Taka
Canvasによるデジタル時計制作入門
Canvasによるデジタル時計制作入門
Yossy Taka
ハイブリッドアプリについて-PhoneGapアプリ制作の入り口-
ハイブリッドアプリについて-PhoneGapアプリ制作の入り口-
Yossy Taka
Webの仕組みとプログラミング言語
Webの仕組みとプログラミング言語
Yossy Taka
Emmetの使い方
Emmetの使い方
Yossy Taka
JavaScript04 jquery プラグインを使おう
JavaScript04 jquery プラグインを使おう
Yossy Taka
JavaScript basic, jQuery animation
JavaScript basic, jQuery animation
Yossy Taka
Webデザイン入門1-HTML5・CSSについて-
Webデザイン入門1-HTML5・CSSについて-
Yossy Taka
JavaScript Basic 01
JavaScript Basic 01
Yossy Taka
More from Yossy Taka
(11)
WebサイトへのYotutube動画の設置
WebサイトへのYotutube動画の設置
Bracketsを使おう
Bracketsを使おう
canvasによるアナログ時計の作成
canvasによるアナログ時計の作成
Canvasによるデジタル時計制作入門
Canvasによるデジタル時計制作入門
ハイブリッドアプリについて-PhoneGapアプリ制作の入り口-
ハイブリッドアプリについて-PhoneGapアプリ制作の入り口-
Webの仕組みとプログラミング言語
Webの仕組みとプログラミング言語
Emmetの使い方
Emmetの使い方
JavaScript04 jquery プラグインを使おう
JavaScript04 jquery プラグインを使おう
JavaScript basic, jQuery animation
JavaScript basic, jQuery animation
Webデザイン入門1-HTML5・CSSについて-
Webデザイン入門1-HTML5・CSSについて-
JavaScript Basic 01
JavaScript Basic 01
HTML5 Local Storageを利用したメモ帳アプリ
1.
LocalStorageによる データ保存 メモ帳アプリを作ってみよう
2.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights 2 localStorage
3.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights Reserved. 3 localStorageとは • HTML5の関連技術として、新しい規格として標準化 • アプリ(ブラウザ)を終了しても、5MBまでのデータを 保存することができるため、オフラインでも利用可能 • 現状は文字列のみ、保存・読み込みが可能 – 配列などのオブジェクトは保存できない • Internet Explorer 8、Mozilla Firefox、Google Chrome、 Safari、Operaなど全ての主要ブラウザの最新版で実装済 み
4.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights Reserved. 4 記述方法 • localStorageの値の設定(保存) – localStorage . キー = 値 – localStorage['キー'] = 値 – localStorage.setItem('キー', 値) • localStorageの値の取得 – localStorage.キー – localStorage['キー'] – localStorage.getItem('キー') • localStorageの値の削除 – delete localStorage.キー – delete localStorage['キー'] – localStorage.removeItem('キー')
5.
• localStorageの値の設定(保存) – localStorage
. キー = 値 – localStorage['キー'] = 値 – localStorage.setItem('キー', 値) • localStorageの値の取得 – localStorage.キー – localStorage['キー'] – localStorage.getItem('キー') • localStorageの値の削除 – delete localStorage.キー – delete localStorage['キー'] – localStorage.removeItem('キー') 記述方法 簡単に入力できる 記述を利用
6.
記述方法 • localStorageの値の設定(保存) – localStorage
. キー = 値 • localStorageの値の取得 – localStorage.キー • localStorageの値の削除 – delete localStorage.キー 「キー」は、変数名のルールで任意に指定できます。 「localStrage.キー」という変数だと考えると 変数と同じように利用できます
7.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights 7 とりあえず、簡単に 保存・取得・削除
8.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights 8 一人つぶやきアプリ作成
9.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights 9
10.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights 10 アプリ開発演習に向けて 複数ページコンテンツを 作成してみよう
11.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights Reserved. 11 一人つぶやきアプリ基本仕様 • つぶやき閲覧ページ – 過去のつぶやきを表示 – つぶやき登録画面へ移動 – つぶやき消去 • つぶやき登録ページ – 入力用inputタグ – 登録ボタン
12.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights Reserved. 12 つぶやき登録画面作成 • 登録日時と文字を保存したい • 複数のつぶやきを保存したい – 配列などが利用できないので、複数の情報を 保存するのが難しい
13.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights Reserved. 13 つぶやき登録画面作成 • 登録日時と文字を保存したい • 複数のつぶやきを保存したい – 配列などが利用できないので、複数の情報を 保存するのが難しい そんなときは・・
14.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights 14 JSON
15.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights Reserved. 15 JSONとは • JavaScript Object Notation – javaScriptから文字データを構造的に扱うために考え られたデータ形式 – ダブルクォートで値などを囲む – コロン区切りのペアを、カンマ区切りで記載 { “date” : “1月1日”, “text” : “あけおめ”} { “変数” : “値”, “変数” : “値”}
16.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights Reserved. 16 JSONをStorageで活用 • localStorageは文字しか保存できない でも、JavaScriptでは配列を活用したい
17.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights Reserved. 17 JSONをStorageで活用 • localStorageへのデータ書き込み – 配列をJSONデータ(文字)に変換 • localStorageからデータ取得 – JSONデータ(文字)を配列に変換 – 配列に変換後、配列名.変数 としてデータ加工 JSON.stringify(配列) JSON.parse(jsonデータ)
18.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights 18 配列の使い方
19.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights Reserved. 19 配列はいろいろ出来る • 配列の先頭に挿入 – 配列.unshift(データ) • 配列の後に追加 – 配列.push(データ) 詳しくはMSDNリファレンス
20.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights 20 警告メッセージと 確認ダイアログ
21.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights Reserved. 21 ダイアログ表示 • 警告メッセージ alert(‘メッセージ'); • 確認ダイアログ var r = confirm(‘メッセージ'); if(r){ //OK }else{ //キャンセル }
22.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights 22 HTML要素の 生成と追加
23.
Copyright Ⓒ 2015
Yoshihiro Takahashi All Rights Reserved. 23 タグの生成方法 • タグの生成 オブジェクト名 = document.createElement(“タグ名”); • 属性の追加 オブジェクト名.属性名 = 値; • タグ内への文章追加 オブジェクト名. innerHTML = 値; • タグへのCSS指定 オブジェクト名. style.プロパティ = 値;
24.
Copyright Ⓒ 2015
Yoshihiro Takahashi All Rights Reserved. 24 タグの追加方法 • ID指定でのタグの追加 document.getElementById(“id名”).appendChild(オブジェクト名); • タグ指定でのタグ追加 var 親オブジェクト名 = document.getElementByTagName (“親タグ名”); 親オブジェクト名[何番目].appendChild (オブジェクト名);