---
# System prepended metadata

title: 簡易密碼產生器及在瀏覽器上儲存資料

---

# 簡易密碼產生器及在瀏覽器上儲存資料

### 簡易密碼產生器

```
<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>
```