web storage
web storage
HTML4中使用cookies在客戶端保存諸如用戶名等簡單的信息，但是，使用cookies存儲永久數據存在以下問題：
大小：cookies的大小限制在4KB
帶寬：cookies是隨HTTP事務一起被發送的，因此會浪費一部分帶寬
復雜性：正確的操縱cookies是很困難的
HTML5重新提供了一種在客戶端本地保存數據的功能，Web Storage
Web Storage功能，就是在Web上存儲數據，分為兩種：
sessionStorage：將數據保存在session對象中。所謂session，是指用戶在瀏覽某個網站時，從進入網站到瀏覽器關閉所經過的這段時間，session對象可用來保存在這段時間內所要求保存的任何數據
localStorage：將數據保存在客戶端本地的硬件設備中，即使瀏覽器關閉了，該數據仍然存在，下次打開瀏覽器訪問網站時仍然可用
區別：sessionStorage為臨時保存，localStorage為永久保存
HTML5中提供了localStorage對象可以將數據長期保存在客戶端，直到人為清除。localStorage提供了幾個方法:
1、存儲：localStorage.setItem(key,value)
如果key存在時，更新value
2、獲取：localStorage.getItem(key)
如果key不存在返回null
3、刪除：localStorage.removeItem(key)
一旦刪除，key對應的數據將會全部刪除
4、全部清除：localStorage.clear()
某些時候使用removeItem逐個刪除太麻煩，可以使用clear,執行的後果是會清除所有localStorage對象保存的數據
5、遍歷localStorage存儲的key
length 數據總量，例：localStorage.length
key(index) 獲取key，例：var key=localStorage.key(index);
6、存儲JSON格式數據
JSON.stringify(data) 將一個對象轉換成JSON格式的數據串,返回轉換後的串
JSON.parse(data) 將數據解析成對象，返回解析後的對象
----------------------------------------
地理定位
地理定位對象
navigator.geolocation
得到當前位置
navigator.geolocation.getCurrentPosition()
監聽位置的變化
navigator.geolocation.watchPosition()
移除監聽
navigator.geolocation.clearWatch()
----------------------------------------
媒體查詢
媒體類型
all 所有媒體
braille 盲文觸覺設備
embossed 盲文打印機
print 手持設備
projection 打印預覽
screen 彩屏設備
speech ‘聽覺‘類似的媒體類型
tty 不適用像素的設備
tv 電視
關鍵字
and
not not關鍵字是用來排除某種制定的媒體類型
only only用來定某種特定的媒體類型
媒體特性
(max-width:600px)
(max-device-width: 480px) 設備輸出寬度
(orientation:portrait) 豎屏
(orientation:landscape) 橫屏
(-webkit-min-device-pixel-ratio: 2) 像素比
devicePixelRatio 設備像素比 window.devicePixelRatio = 物理像素 / dips
樣式引入
方式1：
<link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />
方式2：
@import url("css/reset.css") screen;
方式3：
@media screen{
選擇器{
屬性：屬性值；
}
}
---------------------------------
rem(font size of the root element)：是指相對於根元素的字體大小的單位
vw：viewpoint width，視窗寬度，1vw等於視窗寬度的1%。
vh：viewpoint height，視窗高度，1vh等於視窗高度的1%。
---------------------------------
web storage