HTMLDOMcookieプロパティ
HTML DOM cookieプロパティは、cookieの作成、読み取り、および削除に使用されます。cookieは、ユーザー固有の情報を追跡するためにWebサイトによって使用されます。このメソッドは、すべてのCookieのセミコロンで区切られたリストを含む文字列の戻りタイプを持っています。 Cookieは、キー=値ペアの形式です。ブラウザを閉じるとすぐにCookieが削除されますが、有効期限を指定できます。
構文
以下は、-
の構文です。Cookieプロパティの設定-
document.cookie = newCookie
ここで、newCookieは文字列型であり、名前と値のペアのセミコロンで区切られたリストです。 newCookieのオプションの値は次のとおりです。
パラメータ値 | 説明 |
---|---|
Expires =date | 日付をGMT形式で指定します。デフォルトでは、ブラウザを閉じるとすぐにCookieが削除されます。 |
path =path: | Cookieを保存するコンピュータのディレクトリパスを指定します。使用する絶対パスのみ。 |
domain =domainname | Webサイトのドメインを指定します。指定されていない場合は、現在使用されているドキュメントドメイン。 |
安全 | ブラウザにhttpsプロトコルを使用してCookieをサーバーに送信するように指示するには |
例
HTMLDOMcookieプロパティの例を見てみましょう-
<!DOCTYPE html> <html> <body> <h1>javascript COOKIE example</h1> <p>Click the below button to create a cookie</p> <button type="button" onclick="cookieCreate()">CREATE</button> <p id="Sample"></p> <script> function cookieCreate(){ var x=document.cookie; x="username=Matt;class=prior;location=USA;expires=Wed, 10 July 2019 12:00:00 UTC"; document.getElementById("Sample").innerHTML="The cookie values are : "+x; } </script> </body> </html>
出力
これにより、次の出力が生成されます-
[作成]ボタンをクリックすると-
上記の例では-
最初に、ユーザーがクリックしたときに関数createCookie()を実行するCREATEボタンを作成しました-
<button type="button" onclick="cookieCreate()">CREATE</button>
cookieCreate()関数は、ドキュメントオブジェクトのcookieプロパティを使用してcookieを作成します。次に、セミコロンで区切られたCookieキーペア値を設定します。作成されたCookieは、innerHTMLプロパティ-
を使用して、IDが「Sample」の段落に表示されます。function cookieCreate(){ var x=document.cookie; x="username=Matt;class=prior;location=USA;expires=Wed, 10 July 2019 12:00:00 UTC"; document.getElementById("Sample").innerHTML="The cookie values are : "+x; }
-
HTMLDOMoffsetWidthプロパティ
HTML DOM offsetWidthプロパティは、パディング、境界線、スクロールバーを含む要素の幅に対応する数値を返しますが、マージンは返しません。 以下は構文です- 数値を返す HTMLelement.offsetWidth HTML DOM offsetWidthの例を見てみましょう プロパティ- 例 <!DOCTYPE html> <html> <head> <title>HTML DOM offsetHeight</title> <style> form { &n
-
HTMLDOMoffsetParentプロパティ
HTML DOM offsetParentプロパティは、子オフセットが定義されている参照された親要素を返します。 以下は構文です- 参照されたオフセット親要素を返す HTMLelement.offsetParent HTML DOM offsetParentの例を見てみましょう。 プロパティ- 例 <!DOCTYPE html> <html> <head> <title>HTML DOM offsetParent</title> <style type="text/css"> &n