# 簡易密碼產生器及在瀏覽器上儲存資料
### 簡易密碼產生器
```
<style>
body {
font-size: 50px;
font-family: Georgia, 'Times New Roman', Times, serif;
}
.result {
background-color: rgba(205, 252, 36, 0.938);
}
.btn-generate{
background-color: rgb(73, 10, 247);
color: #fff;
}
</style>
<body>
<div class="app">
<div><label><input type="checkbox" name="en"/>English</label></div>
<div><label><input type="checkbox" name="num"/>Number</label></div>
<div><label><input type="checkbox" name="sp"/>SpecialIcon</label></div>
</div>
<div>
<button class="btn-generate">produce</button>
</div>
<div class="result">
</div>
<script>
document.querySelector('.btn-generate').addEventListener('click',
function(){
let availableChar = ''
if (document.querySelector('input[name=en]').checked){
availableChar += 'abcdefghijklmnopqrstuvwxyz'
}
if (document.querySelector('input[name=num]').checked){
availableChar += '1234567890'
}
if (document.querySelector('input[name=sp]').checked){
availableChar += '!@#$%&*'
}
let result = ''
for(let i = 0; i<10; i++) {
//先把隨機數0~0.999*長度在無條件捨去
const number = Math.floor(Math.random()*availableChar.length)
result += availableChar[number]
}
document.querySelector('.result').innerText = result
}
);
</script>
</body>
```
三個 if 重複性很高，試著優化他們
把 data-char 放進標籤內
```
<style>
body {
font-size: 50px;
font-family: Georgia, 'Times New Roman', Times, serif;
}
.result {
background-color: rgba(205, 252, 36, 0.938);
}
.btn-generate{
background-color: rgb(73, 10, 247);
color: #fff;
}
</style>
<body>
<div class="app">
<div><label><input type="checkbox" name="en" data-char="abcdefghijklmnopqrstuvwxyz"/>English</label></div>
<div><label><input type="checkbox" name="num" data-char="1234567890"/>Number</label></div>
<div><label><input type="checkbox" name="sp" data-char="!@#$%&*"/>SpecialIcon</label></div>
</div>
<div>
<button class="btn-generate">produce</button>
</div>
<div class="result">
</div>
<script>
document.querySelector('.btn-generate').addEventListener('click',
function(){
let availableChar = ''
const elements = document.querySelectorAll('input[type=checkbox]')
for(let i=0; i<elements.length; i++){
if(elements[i].checked){
availableChar += elements[i].getAttribute('data-char')
}
}
let result = ''
for(let i = 0; i<10; i++) {
//先把隨機數0~0.999*長度在無條件捨去
const number = Math.floor(Math.random()*availableChar.length)
result += availableChar[number]
}
document.querySelector('.result').innerText = result
}
);
</script>
</body>
```
### 在瀏覽器上儲存資料的方式
**1. 古老的小甜餅 - cookie**
會自動帶到 server 的小型文字檔
透過 http 的 response 把資料寫到 cookie 上面去夾帶
**2. 最推薦的儲存方式：local storage**
有時候填寫表單不小心離開在返回網頁，或重新整理，填寫的資料還可以在
**3. 保鮮期短暫的 session storage**
跟 local storage 很類似，程式碼也一樣，只需要把 local storage 替換成 session storage，保留的比較短暫，只留在一個分頁內
##### local storage 使用範例
```
<body>
<div class="app">
<div>
<input class="text"/><button>save</button>
</div>
</div>
<script>
const oldValue = window.localStorage.getItem('text')
document.querySelector('.text').value = oldValue
document.querySelector('button').addEventListener('click',
function(){
const value = document.querySelector('.text').value
localStorage.setItem('text',value)
}
);
</script>
</body>
```
Sign in with Wallet
Connect another wallet