Webストレージ技術に基づくWebテーマ切替設定
16579 ワード
機能要件:WebストレージのlocalStorageテクノロジーを使用して、Webテーマスタイルで設定したコンテンツを永続的に保存できます.この例では、ページのトピック色とフォントスタイルをカスタマイズしてlocalStorageに保存できるWebページ設定ページを実現します.このページを再ロードすると、前回保存したスタイル要件が表示されます.実行効果図に示すように(色を選択して保存すると選択色になる)localStorageメソッドは、クライアントにデータを永続的に格納するために使用され、このメソッドに格納されたデータは期限切れではなく、ブラウザを閉じて再開しても、データはデバイスに保存され、継続的に使用できます.sessionStorageメソッドとlocalStorageメソッドの構文構造は似ていますが、sessionStorageメソッドには時間制限があり、ブラウザが開いている期間(sessionとも呼ばれます)にデータを格納するためにのみ使用でき、ブラウザが閉じるとデータはすべて消えます.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div class="big">
<div id="demo" style="display:flex;width:100%;height:200px;align-items: center;
justify-content: center; color: white">HTML5 Web </div>
<div id="frame" style="background-color: #EEEEEE; width: 50%;height: 200px;
position: absolute; left:50%;top:50%; transform: translate(-50%, -50%); " >
<form action="">
<div style="height: 30px"> </div>
<div id="page" style=" display:flex;width:100%; align-items: center;
justify-content: center;color: white "> </div>
<div style=" display:flex;width:100%; align-items: center;
justify-content: center;"> :
<select name="" id="color" >
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
</select>
</div>
<br>
<div style=" display:flex;width:100%; align-items: center;
justify-content: center;">