localStorage

可以在瀏覽器存資料的方式,類似cookies。

  • 字串:可以存字串,讀取出來也是字串
  • 數字:可以存數字,但讀出來會變成字串
  • JSON:不能直接存JSON,要轉成string再存,讀出來也是字串化的JSON

const testJSON={
  color: 'red',
  count: 3,
  food: 'apple'
}

//寫localStorage一定要這樣寫,不能寫成localStorage.fruit
//要先轉成string後再存
localStorage['fruit']=JSON.stringify(testJSON);

//讀取
console.log(localStorage['fruit']) 
//"{"color":"red","count":3,"food":"apple"}"

//再轉成JSON繼續使用
console.log(JSON.parse(localStorage['fruit']))
//{color: 'red', count: 3, food: 'apple'}

closest

往parent找最近的元素。
children, sibling, parent’s sibling 都不會找到。

用法

<h1>我是標題</h1>
<table>
  <tbody>
    <tr id="myTr">
      <td>測試資料</td>
    </tr>
    <tr>
      <td>測試資料</td>
    </tr>
  </tbody>
</table>

myTr.closest('table') //回傳table這個元素
myTr.closest('td') //null //無法尋找子層
myTr.closest('tr') //null //無法尋找兄弟層
myTr.closest('h1') //null //無法尋找父層的兄弟

列印CSS

@media print指定於列印時觸發的CSS。

※chrome debug方法:
More tools→Rendering→Emulate CSS media→print

指定頁碼

@page {
  @bottom-center {
    content: "第" counter(page) "頁";
  }
}

列印邊界

使用@page可以指定預設列印邊界。但使用者仍可透過自訂列印邊界改掉它

@page {
  margin-bottom: 10mm;
}

Boostrap

Bootstrap內建有列印後隱藏的class

<div class="hidden-print">這段文字會被隱藏</div>

print()事件

print()事件可以呼叫列印行為

window.print()

列印頁表格換頁

  • thead:每頁重複表頭
  • tfoot:每頁重複表尾
  • border-collapse: collapse合併框線:導致chrome換頁時頁尾多一條線
  • 使用last-child / first-chid 指定框線:導致框線不均勻
  • rowspan分割表格:某些情況下IE11 內容會變形,會出現消失的框線