H5小內容(六)

2022-09-17 03:21:13 字數 2437 閱讀 2617

web worker

基本內容

單執行緒與多執行緒

worker可以模擬多執行緒的效果

定義 - 執行在後台的j**ascript

注意 - 不能使用dom

在worker中只能使用j**ascript中的ecma

目前主流瀏覽器都支援worker,除ie8之前

worker提供api

檢測當前瀏覽器是否支援worker

if( typeof(worker) !== "undefined" )else

建立webworker物件

new worker(worker檔案)

worker物件

onmessage事件

postmessage()方法

terminate()方法

web儲存api

基本內容

資料倉儲 - 用於儲存資料

html5儲存系統

localstorage(本地儲存) - 替代cookie

sessionstorage(會話儲存) - 替代session(類似於記憶體)

sessionstorage

setitem(key,value)方法

作用 - 設定資料(新增|修改資料)

新增資料 - key值是新的

修改資料 - key值是存在的

引數key - 作為儲存資料的標識(唯一,不可重複)

value - 儲存的資料內容(number|string)

getitem(key)方法

作用 - 獲取資料(讀取資料)

引數key - 根據key獲取對應的資料內容

返回值 - key對應的value值

key(index)方法

作用 - 根據索引值返回對應key

引數index - 索引值

返回值 - 返回key值

removeitem(key)方法

作用 - 刪除資料

引數key - 根據key刪除指定資料內容

clear()方法

作用 - 將儲存系統的所有資料刪除(清空)

length屬性

作用 - 返回當前儲存系統的資料個數

localstorage

提供的屬性和方法與sessionstorage一致

storage事件

作用 - 實現多個視窗之間共享資料內容

問題資料安全性低

目前除safari瀏覽器支援該事件,其他所有瀏覽器都不支援

對於資料的操作

新增 - setitem()

查詢 - getitem()

length屬性

key(index)

刪除 - removeitem()

clear()

修改key(index) - key

getitem() - value

setitem(key,新value)

sessionstorage與localstorage

sessionstorage儲存系統儲存資料的特點

當瀏覽器視窗關閉時,資料全部丟失

當再次開啟瀏覽器視窗時,資料不能使用

localstorage儲存系統儲存資料的特點

當瀏覽器視窗關閉時,資料依舊儲存

當再次開啟瀏覽器視窗時,資料繼續使用

資料只能由使用者刪除

web socket(了解)

基本內容

socket - 是一種網路協議

網路協議 - server&http課程中的http

websocket

表示在html5頁面中允許支援socket協議

瀏覽器-伺服器

使用的網路協議 - http協議

http協議的問題

短連線無狀態

websocket提供的api

建立websocket物件

var socket = new websocket(url);

url - 是以"ws://"開始的

建立socket物件,建立連線

websocket物件的方法

send() - 向伺服器端傳送資料內容

close() - 關閉socket鏈結

websocket物件的事件

onmessage事件 - 當伺服器端向客戶端傳送返回資料時被觸發

onopen事件 - 當客戶端與伺服器端建立連線時被觸發

完成初始化功能

onclose事件 - 當客戶端與伺服器端關閉鏈結時被觸發

完成資源釋放功能

websocket物件的屬性

readystate屬性 - 表示伺服器端的通訊狀態

connecting(數字值為0),表示正在連線。

open(數字值為1),表示已建立連線。

closing(數字值為2),表示正在關閉連線。

closed(數字值為2),表示已關閉連線。

H5學習筆記(六)

1 複雜選擇器 1 兄弟選擇器 兄弟 具備相同父元素的一組元素稱為兄弟元素 1 相鄰兄弟選擇器 1 什麼是相鄰兄弟選擇器 匹配指定元素的相鄰兄弟元素 2 語法 結合符 選擇器1 選擇器2 2 通用兄弟選擇器 1 什麼是通用兄弟選擇器 匹配指定元素下面所有的兄弟選擇器的元素 2 語法 結合符 選擇器1...

H5和CSS小總結

h2 設定字型的大小 h1 設定字型的樣式 h2 引入字型 對字型的降級 在所有瀏覽器中都有幾種可用的預設字型。這些包括 monospace serif 和 sans serif。當某種字型不可用時,你可以讓瀏覽器將其 降級 為另一種字型。例如,如果你希望元素使用 helvetica 字型,但是當 ...

h5開發小魔法點

1 meta標籤設定 設定當前viewport的寬度等於裝置的寬度 2 input的placeholder文字位置偏上的情況 input的placeholder會出現文字位置偏上的情況 pc端設定line height等於height能夠對齊,而移動端仍然是偏上,解決方案時是設定css line h...