テキストエリアに入力した文字を保存するには、どうすればいいのか？

###実現したいこと

htmlとcssで、web上でテキストエリアに入力された文字を保存して、特定の文字が入力されたら
その文字について詳細なページを表示するシステムを作っています。

現在、テキストエリアに文字を入力するプログラムは完成しています。
しかし、その入力した文字をどうやって保存したらいいのか分かりません。

調べてみたのですが、知りたい情報がなかなか見つかりませんでした。
何の言語の、どのような処理を使えば、このような処理を作れるか教えていただけないでしょうか？
よろしくお願いします。

###現在、出来ているソースコード

html
1<!DOCTYPE html>
2<html lang = “ja”>
3<head>
4    <meta charset = “UFT-8”>
5    <title>買い物プラス</title>
6    <link href="css/style.css" rel="stylesheet">
7</head>
8
9<body>
10    <div class="container">
11        <textarea id="comment" placeholder="買い物したい食材をメモしてください"></textarea>
12        <div class="btn">保存</div>
13    </div>
14</body>
15</html>

CSS
1@charset "UTF-8";
2
3body{
4    font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
5    font-size: 16px;
6    
7}
8
9.container{
10    width:400px;
11    margin: 30px auto;
12}
13
14textarea{
15    width: 400px;
16    box-sizing: border-box;
17    height: 200px;
18    padding: 10px;
19    font-size: 16px;
20    margin-bottom: 15px;
21    line-height: 1.5;
22}
23
24textarea:focus{
25    outline: none;
26}
27
28.btn{
29    display: inline-block;
30    width: 150px;
31    background: #00aaff;
32    padding: 5px;
33    color: #fff;
34    border-radius: 5px;
35    text-align: center;
36    cursor: pointer;
37    box-shadow: 0 4px 0 #0088cc;
38    float: right;
39}
40

###試したこと
自分がやりたいプログラムに近い物はないか、ドットインストールで探したり「テキストエリア保存」などのキーワードで探しました。

x_x

2017/07/05 07:00

ところどころ全角の引用符「“」「”」が現れていますが大丈夫でしょうか？

退会済みユーザー

2017/07/05 07:02

うまく動いていたので気づきませんでした。すぐ、半角に直します。ありがとうございます。

kei344

2017/07/05 07:11

質問タイトルの「タイトルエリア」は「テキストエリア」でしょうか。

退会済みユーザー

2017/07/05 07:31

タイトルに入力した文字が間違っていました。すぐ、直します。テキストエリアです。ありがとうございます。

行動規範の内容に同意します

回答2件

サーバーに保存するのであれば、クライアントから情報を送らなければなりません。
form / submit / post などで検索するといろいろと出てくると思います。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/form
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input

あるいは、ちょっとした文字列をクライアントだけで保持するならcookieでいいかもしれません。
https://developer.mozilla.org/ja/docs/Web/API/Document/cookie

クッキーの使用方法
http://so-zou.jp/web-app/tech/programming/javascript/cookie/

投稿2017/07/05 07:09

x_x

総合スコア13749