chunwen's blog

看完這篇文章你會了解到localStorage是什麼?同時localStorage的一些常用用法該如何操作(如：setItem、getItem)等。文章中也有搭配案例做練習示範，可以即時確認自己是否理解。   備註：本文章內容整理自六角學院 JavaScript 入門篇 - 學徒的試煉 ，若內容有誤再請各位大大告知，感謝! 簡介： localStorage會將網頁資料儲存下來，並透過網址紀錄  EX： https://www.udemy.com/ 補充： localStorage、sessionStorage、cookie比較介紹 連結     請注意，localStorage只會儲存String型態資料(如 數字、布林值、字串 ) 我們可以透過chrome開發工具--application觀察 接著我們就直接進入主題，介紹localStorage常用方法 setItem、getItem操作方式 setItem用來建立新的屬性 getItem可以取出特定值 語法： localStorage.setItem（key,value）; key 自行創建 value 對應的值   //value 的型態只有 String!!! var str = "tom" ; localStorage.setItem( "myName" , str); console.log(localStorage.getItem( 'myName' )); //tom setItem、getItem 實作練習 連結 //HTML結構 < h2 > 請輸入你的姓名 </ h2 > < input type = "text" class = "textClass" > < input type = "button" value = "點擊" class = "btnClass" > < input type = "button&

格線系統說明： 格線系統一開始是從平面設計衍生出來，目的是為了讓排版版面看起來更為整齊、美觀。 而網頁部分則是因為早期電腦螢幕通常都是1024px， 故早期設計上都以960px為主 。 欄數部分以12欄為主流(因為可以切分出較多組公倍數)。 接著我們來看一下網格系統吧! 下面這張圖是sketch 設定畫面 說明： 1.圖片中設定的Total width明明就是960px，但為何實際寬度只有940px呢? 原因出在，此格線系統有一個Gutter on outside(共20px)，而通常這部分都是設定在container上 (此案例的話是推padding-left:10px padding-right:10px) 補充：為何要有gutter on outside出現呢?  回答連結 簡單來說就是為了讓畫面不那麼擁擠，可以讓閱聽者閱讀上更加舒適 介紹完格線系統後，接著我們來想想上面的Gutter是怎麼產生呢? 你第一個想到應該會使用padding或margin來推擠吧!沒錯Bootstrap也是由 在column上使用padding來推擠  如下圖 但在column上加上padding推擠後會造成畫面往內縮(畫面不一致)，所以還要在row上加上margin將推擠回補 最後在行動版上， 若沒有在container上加一層padding推擠會無法產生兩邊相同間距(也會出現X軸可以水平移動) 如下圖    程式碼： // container拿掉padding .container {   max-width: 960px;   margin: 0 auto;   // padding-left: ($gutter-width/2);   // padding-right: ($gutter-width/2); } 但，如果補回padding值，左右就會保留一定寬度 // container拿掉padding .container {   max-width: 960px;   margin: 0 auto;   // padding-left: ($gutter-width/2);   // padding-right: ($gutt