HTML筆記（2）——HTML5新屬性

時間 2019-11-19

標籤 html 筆記 html5 屬性欄目 HTML 简体版

原文原文鏈接

HTML5 DAY01:javascript

基本內容java

HTML5目前最新的規範(標準)是2014年10月推出web

2005年左右出現HTML5版本(非標準)正則表達式

W3C組織(兩個組織定義H5規範)canvas

學習(研究)HTML5是學習將來(未來主流)api

HTML版本 - 第一階段主要學習仍是4版本(包含5版本)瀏覽器

<header><nav>安全

HTML5版本以後,聲明再也不出現版本信息服務器

有意地版本,之後可能再也不會有新版本網絡

HTML5的規範內容實時更新

注意

HTML5永遠都不可能離開javascript.

HTML5在移動端支持好於PC端

HTML5新表單

1、input新類型

①email類型

語法：<input type=」email」 />

做用 - 驗證是否包含"@"

問題 - 驗證邏輯並不完整

②url類型

語法：<input type=」url」 />

做用 - 提交表單時,驗證是否包含"http://"

問題 - 驗證邏輯並不完整

③tel類型 - 只在移動端顯示

④number類型

語法：<input type=」number」 />

min - 最小值

max - 最大值

step - 步長,默認值爲1

⑤range類型

語法：<input type=」range」 min=」1」 max=」100」 value」50」/>

min - 最小值

max - 最大值

tep - 步長

value - 當前值

⑥date類型

語法：<input type=」date」 />

⑦week類型

語法：<input type=」week」 />

⑧month類型

語法：<input type=」month」 />

⑨color類型

語法：<input type=」color」 />

search類型--輸入搜索關鍵字操做的文本框

語法：<input type=」search」 />

2、表單新元素

①datalist元素--定義備選項(並不顯示)

配合<input>元素使用

定義list屬性 - 屬性值等於<datalist>元素的id屬性值

效果 - 和<select>下拉列表相似

特色 - 數據與結構的分離

數據 - 預約義數據內容<datalist>

結構 - 顯示在HTML頁面中的元素<input>

優勢 - 使用<datalist>元素定義的數據,能夠重複使用

②progress元素---進度條

max - 設置進度條的最大值

沒有min屬性 - 最小值爲0

value - 表示當前的進度值

③meter元素--刻度

min - 最小值

max - 最大值

value - 當前值

low - 低預警值

high - 高預警值

④output元素--輸出

3、表單新屬性

①placeholder屬性 - 提供默認提示內容

語法：<input type=」text」 placeholder=」提示文本」 />

做用 - 相似於value屬性

區別

value屬性值

顯示爲黑色

確實存在文本框中

placeholder屬性值

顯示爲灰色

相似於背景存在

②multiple屬性 - 容許輸入多個值

語法：<input type=」text」 multple/>

做用 - 容許輸入多個值

注意 - 多個值之間使用","

用法 - 只定義屬性名,沒有屬性值

③autofocus屬性 - 自動獲取焦點

語法：<input type=」text」 autofocus />

做用 - 自動獲取焦點

用法 - 只定義屬性名,沒有屬性值

④form 屬性- 容許表單元素定義在表單以外

語法：<form id=」myform」></form>

本來的HTML頁面中定義表單元素

全部的表單元素,必須定義在<form>元素中

做用 - 容許將表單元素定義在<form>元素外

<form>元素外的表單元素,使用該屬性

form屬性值等於<form>元素的id屬性值

4、表單新驗證

(1)驗證屬性

①required屬性：驗證當前元素值是否爲空

語法：<input type=」text」 required />

②pattern屬性:使用正則表達式驗證當前元素值是否匹配

語法：<input type=」text」 pattern=」[0-9a-zA-Z]{6,16}」 />

注意 - 並不能驗證當前元素值是否爲空

③min和max屬性：驗證當前元素值最小值或最大值

通常適用於number、range等元素

語法：<input type=」number」 min=」1」 max=」50」 />

④minlength和maxlength屬性

語法：<input type=」text」 maxlength=」10」 minlength=」1」 />

minlength - 驗證當前元素值的最小長度

輸入值時,容許輸入小於指定值

提交表單時,驗證元素值最小長度

注意：minlength並非HTML5新屬性

maxlength - 驗證當前元素值的最大長度

輸入值時,長度不能大於指定值

⑤validity屬性

語法：指定元素.validity.validityState

如：Elem.validity.valid

表單驗證HTML5提供一種有效狀態

有效狀態經過validityState對象獲取到

validityState對象可經過validity屬性獲得

驗證(有效)狀態

validityState對象提供了一系列的有效狀態

經過這些有效狀態,進行判斷

注意：全部驗證狀態必須配合上述的驗證屬性使用

做用：用來替換本來手工實現的邏輯

(2)驗證狀態

①valid

做用 - 判斷當前元素值是否正確

注意：該狀態返回true,表示驗證成功；該狀態返回false,表示驗證失敗

②valueMissing

做用 - 判斷當前元素值是否爲空

用法 - 配合required屬性使用

③typeMismatch

做用 - 判斷當前元素值的類型是否匹配

用法 - 配合email、number、url等

④patternMismatch

做用 - 判斷當前元素值是否與指定正則表達式匹配

用法 - 配合pattern屬性使用

⑤tooLong

做用 - 判斷當前元素值的長度是否正確

用法 - 配合maxlength屬性

注意：使用maxlength屬性後,實際不可能出現長度大於maxlength的值；tooLong很難出現這種狀況

⑥rangeUnderflow

做用 - 判斷當前元素值是否小於min屬性值

用法 - 配合min屬性

注意 - 並不能與max屬性值進行比較

⑦stepMismatch

做用 - 判斷當前元素值是否與step設置相符

用法 - 配合step使用

注意 - 並不能與min或max屬性值進行比較

⑧customError

用法 - 配合setCustomValidity()方法

若是使用該方法,該狀態返回true

setCustomValidity()方法

做用 - 設置自定義的錯誤提示內容

存在的問題：一旦使用該方法修改默認錯誤提示信息後

即便輸入正確,錯誤提示依舊存在(邏輯錯誤)

解決：判斷若是用戶輸入正確的話，調用該方法將信息設置爲空("")

不能使用上述有效狀態的任何一種判斷輸入是否正確(全部狀態返回false)

HTML Day02

1、視頻處理 <video></video>

①基本內容：使用Flash技術處理HTML頁面中的視頻內容

包含音頻、動畫、網頁遊戲等

特色

瀏覽器原生不支持(IE瀏覽器要求安裝ActiveX組件)

性能很差(不能過多地使用)

智能移動端並不支持Flash技術

命運

Flash的母公司Adobe公開宣佈放棄

目前用於替代Flash技術最好的選擇 - HTML5

幾乎全部瀏覽器原生支持<video>元素

性能更高

智能移動端支持很是好

②如何實現視頻處理

<video>元素

若是當前瀏覽器不支持<video>元素

在<video>元素內編寫提示內容

屬性

src - 引入視頻文件的路徑

autoplay - 自動播放視頻

使用<source>元素

<video>

</video>

③<video>支持的視頻格式

MP4格式 - 目前比較主流

OGG格式 - 多用於移動端

WebM格式 - 目前惟一支持超高清格式

在HTML頁面中支持超高清格式(HTML5)

由Google公司推出的

④<video>元素的屬性

src - 引入視頻文件的路徑

autoplay - 自動播放視頻

controls - 提供控制面板

loop - 表示循環播放

poster - 設置播放以前顯示的圖片

width和height - 設置顯示視頻的寬度和高度

preload - 預加載

auto - (默認值)自動加載

none - 不加載

metadata - 只加載視頻的基本信息(不含視頻)

⑤高級內容

方法

play() - 播放視頻

pause() - 暫停視頻

load() - 加載視頻

canPlayType() - 判斷當前瀏覽器是否支持指定視頻格式

事件

play - 當視頻播放時被觸發

pause - 當視頻暫停時被觸發

ended - 當視頻結束時被觸發

error - 當視頻錯誤時被觸發

canplay - 不考慮總體狀況下,只要能播放,就播放

canplaythrough - 考慮總體狀況下,只要能播放,就播放

progress - 表示視頻加載的進度

屬性 - 用於判斷

paused - 表示判斷當前視頻是否暫停

返回Boolean值,true表示暫停,false表示播放

ended - 表示判斷當前視頻是否播放完畢

返回Boolean值,true表示完畢

duration - 表示當前視頻的時長

currentTime - 表示當前視頻播放的位置

二、音頻處理<audio></audio>

第一種 - 只支持一種音頻格式

第二種 - 同時引入多個音頻格式

<audio>

</audio>

<audio>元素支持音頻格式

MP3 - 目前最主流

OGG

WAV

3、畫布<canvas></canvas>

①基本內容

簡單來講,HTML5提供的新元素<canvas>

Canvas在HTML頁面提供畫布的功能，在畫布中繪製各類圖形

Canvas繪製的圖形與HTML頁面無關

沒法經過DOM獲取繪製的圖形

沒法爲繪製的圖形綁定DOM事件

只能使用Canvas提供的API

Canvas用途

在HTML頁面中繪製圖表(例如柱狀圖、餅狀圖等)

網頁遊戲 - Flash技術

使用HTML5中的Canvas

如何使用Canvas

在HTML頁面中定義<canvas>元素

在javascript代碼中

獲取<canvas>元素

建立畫布對象

getContext('2d')方法

使用Canvas提供的API

②繪製圖形

繪製矩形

fillRect(x,y,width,height) - 實心矩形

x和y - 矩形的左上角座標值

width - 設置矩形的寬度

height - 設置彗星的高度

strokeRect(x,y,width,height) - 空心矩形

clearRect(x,y,width,height) - 清除指定區域的矩形

設置顏色

fillStyle - 設置填充顏色

strokeStyle - 設置描邊顏色

globalAlpha - 設置透明度(0-1)

設置漸變

線型漸變 - createLinearGradient(x1,y1,x2,y2)

具備基準線 - 起點(x1,y1)和終點(x2,y2)

1. 設置線型漸變

createLinearGradient(x1,y1,x2,y2)

x1和y1 - 基準線的起點座標值

x2和y2 - 基準線的終點座標值

該方法返回漸變對象

2. 經過漸變對象,設置漸變顏色

addColorStop(postion,color)方法

postion - 設置漸變顏色的位置

該值的範圍爲 0-1

color - 設置漸變的顏色

3. 設置填充顏色 - 漸變對象

4.繪製矩形

扇形(射線)漸變 - createRadialGradient(x1,y1,r1,x2,y2,r2)

具備柱形(錐形) - 兩個圓的面積

參數

x1和y1 - 第一個圓的圓心座標值

r1 - 第一個圓的半徑

x2和y2 - 第二個圓的圓心座標值

r2 - 第二個圓的半徑

1. 設置扇形漸變

createRadialGradient(x1,y1,r1,x2,y2,r2)

x1和y1 - 第一個基準圓的圓心座標值

r1 - 第一個基準圓的半徑

x2和y2 - 第二個基準圓的圓心座標值

r2 - 第二個基準圓的半徑

該方法返回漸變對象

2. 設置漸變顏色

3. 設置填充顏色爲漸變

4. 繪製矩形

③繪製文字

方法：

fillText(text,x,y) - 實心文字

text - 繪製的文字內容

x和y - 繪製的座標值

strokeText(text,x,y) - 空心文字

屬性

font - 相似於CSS中的font屬性

textAlign - 設置文字的水平方向對齊

left - 左對齊

center - 水平居中

right - 右對齊

textBaseline - 設置文字的垂直方向對齊

top - 頂部對齊

middle - (垂直)居中對齊

bottom - 底部對齊

hanging - 懸掛基線

alphabetic - 字母基線

注意

不管是水平方向仍是垂直方向對齊,基準線對齊,並非文字對齊

不管是水平方向仍是垂直方向對齊,並非必要的屬性(不使用也是能夠的)

④陰影效果

shadowColor - 設置陰影顏色

shadowOffsetX - 設置水平方向陰影

shadowOffsetY - 設置垂直方向陰影

shadowBlur - 設置陰影的模糊程度

⑤建立路徑

(標識)方法

beginPath() - 表示開始建立路徑

closePath() - 表示結束建立路徑

設置方法

rect(x,y,width,height) - 設置矩形形狀

x和y - 設置矩形的左上角座標值

width和height - 設置矩形的寬度和高度

arc(x,y,radius,startAngle,endAngle,direction) - 設置圓形形狀

x和y - 設置圓形的圓心座標值

radius - 設置圓形的半徑

startAngle和endAngle - 設置圓形的起始位置

direction - 按照順時針或逆時針繪製

繪製方法

stroke() - 繪製輪廓

fill() - 繪製填充

繪製線條(直線和折線、多邊形) - 建立路徑

moveTo(x,y) - 設置這條線的起點座標值

lineTo(x,y) - 設置這條線的終點(折點)座標值

⑥設置線條

lineWidth - 設置線條的寬度

默認值爲1(px)

lineCap - 設置線條端點的形狀

butt - 默認值,平直

round - 圓角

square - 正方向

lineJoin - 設置兩條線焦點的形狀

miter - 默認值,尖角

round - 圓角

bevel - 斜角

miterLimit - 配合lineJoin使用

lineJoin設置爲miter,該屬性值設置尖角的延伸範圍

4、Canvas處理圖片

繪製圖片

drawImage(img,x,y) - 按照圖片原大小加載

img - 當前加載(繪製)的圖片

x和y - 繪製圖片的座標值(左上角)

drawImage(img,x,y,width,height) - 按照指定大小加載圖片

img - 當前加載(繪製)的圖片

x和y - 繪製圖片的座標值(左上角)

width和height - 設置繪製圖片顯示的寬度和高度

注意：必須保證圖片加載完畢(onload事件)後,再繪製圖片

平鋪圖片

createPattern(img,type)

img - 平鋪的圖片

type - 平鋪的方式

repeat - 平鋪

no-repeat - 不平鋪

repeat-x - 水平方向平鋪

repeat-y - 垂直方向平鋪

注意：必須保證圖片加載完畢(onload事件)後,再繪製圖片

切割圖片

clip() - 切割(按照建立路徑使用)

畫布方法

scale(x,y) - 縮放(縮小或放大)

x - 表示水平方向的縮放

y - 表示垂直方向的縮放

參數的取值

若是爲1的話,表示不縮放(原大小)

若是小於1的話,表示縮小

若是大於1的話,表示放大

translate(x,y) - 從新定位(x,y)

x和y - 新的座標值

注意 - x和y是相對於上次定位座標值

rotate(旋轉角度) - 旋轉畫布

公式爲 degrees*Math.PI / 180;

5、Chart.js - Canvas的JS庫

做用 - 提供各類圖表

如何使用

①.在HTML頁面中引入Chart.js文件

②.在HTML頁面中定義<canvas>元素

③.在javascript代碼中

獲取<canvas>元素

建立畫布對象

var context = canvas.getContext("2d");

經過畫布對象,建立Chart對象

var chart = new Chart(context);

利用Chart對象調用API方法

var data = [];

④. chart.Pie(data);

提供6種圖表

柱狀圖 - Bar(data,options)

餅狀圖 - Pie(data,options)

曲線圖 - Line(data,options)

環形圖 - Doughnut(data,options)

雷達圖 - Radar(data,options)

極地區域圖 - PolarArea(data,options)

HTML5 DAY04:

SVG

1、基本內容

SVG並不屬於HTML5專有內容

HTML5提供有關SVG原生的內容

在HTML5出現以前,就有SVG內容

SVG,簡單來講就是矢量圖

SVG文件的擴展名爲".svg"

SVG使用的是XML語法

2、概念

SVG是一種使用XML技術描述二維圖形的語言

SVG的特色:

SVG繪製圖形能夠被搜索引擎抓取

SVG在圖片質量不降低的狀況下,被放大

3、**SVG與Canvas的區別

SVG

不依賴分辨率

支持事件綁定

大型渲染區域的程序(例如百度地圖)

不能用來實現網頁遊戲

Canvas

依賴分辨率

不支持事件綁定

最合適網頁遊戲

保存爲".jpg"格式的圖片

4、用途

網頁中一些小的圖標

網頁中動態特效(動畫效果)

5、繪製圖形

①矩形元素

繪製矩形 - <rect />

x和y - 繪製矩形的左上角座標值

width和height - 繪製矩形的寬度和高度

必須使用屬性方式,不能使用style樣式方式

默認顏色爲黑色

設置顏色 - 既可使用屬性,還可使用樣式

fill - 設置填充顏色

stroke - 設置描邊顏色

設置線條寬度

stroke-width

注意

svg繪製的圖形,使用style方式設置樣式,使用的不是CSS屬性,而是SVG屬性

②圓形元素

繪製圓形 - <circle>

cx和cy - 圓形的圓形座標值

r - 圓形的半徑

③橢圓元素

繪製橢圓 - <ellipse>

rx - 橫向的半徑；ry - 縱向的半徑

④直線元素

stroke-width 線條粗細；stroke 直線顏色

⑥折線元素

points - 設置起點、折點及終點

x和y之間使用","分隔

多個點之間使用空格分隔

折線的特色

默認將折線中的區域(起點到終點),默認提供黑色

⑦多邊形元素

6、特效元素

①漸變 - 漸變元素定義在<defs>元素內

線型漸變 - <linearGradient> 該元素是起始元素

<defs>

</linearGradient>

</defs>

將上面設置線型漸變,添加在下面的矩形中

扇形(射線)漸變 - <radialGradient>

②濾鏡 - 高斯模糊

濾鏡使用<filter>元素

<feGaussianBlur>元素 - 高斯模糊

<defs>

</filter>

</defs>

stdDeviation - 設置模糊程度

注意 - 定義在<defs>元素中

將上面的高斯模糊與下面的元素進行關聯

使用filter屬性,值爲url(#id)

設置當前圖形的濾鏡

TWO.js

1.基本內容

JS庫介紹

three.js - 專門用於繪製三維圖形

two.js - 專門用於繪製二維圖形

two.js支持的格式

SVG - 默認

Canvas

WebGL - 專門用於繪製圖像

2.如何使用two.js

①在HTML頁面中引入two.js文件

②在HTML頁面中定義容器(<div>)

③在javascript代碼中

獲取HTML頁面中的容器

建立Two對象,將該對象添加到容器中

new Two(params).appendTo(Element);

使用two.js提供的API方法進行繪製

利用two.js提供的方法,設置圖形

two.makeCircle 設置圓形

two.makeRectangle 設置矩形

利用update()方法進行繪製

3.建立Two對象

構造器 - new Two(params)

params參數 - 設置當前對象的信息

type - 設置當前使用的格式(Two.Types.svg)

svg - 默認值

canvas

webgl

width和height - 設置寬度和高度

fullscreen - 設置是否全屏

Boolean值,true表示全屏

圖形方法

makeLine() - 繪製線條

makeRectangle() - 繪製矩形

makeCircle() - 繪製圓形

makeEllipse() - 繪製橢圓

動畫方法

update() - 更新動畫

play() - 添加動畫(循環)

pause() - 刪除動畫

4.設置繪製圖形的樣式

調用Two對象的繪製方法繪製圖形時,返回該圖形對象

經過該圖形對象,設置相關屬性值

分組操做

Two.Group

若是在HTML頁面繪製多個圖形,而且每一個圖形設置樣式相同或相似

默認方式 - 每一個圖形從新設置一次(代碼重複)

分組操做(Two.Group) - 當前案例

將繪製的圓形和矩形分爲一組

針對這一組,統一設置顯示樣式

實際操做

利用Two對象的makeGroup(objects)方法進行分組

objects - 設置分爲一組的圖形

格式 - 容許傳遞多(不定)個參數

該方法返回Group對象

經過Group對象,統一針對這一組設置樣式

動畫效果

bind(event,callback)方法 - 事件綁定

event - 綁定事件名稱

update - 對應update()方法的做用

全部的DOM事件均可以綁定

callback - 事件處理函數

two.bind("update",function(){

//實現動畫邏輯代碼

}).play();

上述寫法相似於DOM中的setInteval()

setInterval(function(){

實現動畫邏輯

},時間);

HTML5 DAY05:

1、Geolocation(地理定位)

基本內容

地理定位 - 地球的經度和緯度的相交點

實現地理定位的方式

GPS - 美國的,依靠衛星定位

北斗定位 - 純國產,慣性定位技術和衛星定位

基站定位 - 移動運營商建立基站(提供信號源)

基於互聯網 - IP地址(PC端和移動端)

目前不少瀏覽器都具備定位功能

HTML5中地理定位

地理定位功能並非屬於HTML5專有內容

HTML5的地理定位技術,由Google公司提供的

Google Map產品

中國 - 國內不能使用Google公司全部服務和產品

百度地圖和高德地圖

百度地圖

百度地圖 - http://developer.baidu.com/map/

註冊百度開發者帳戶

http://developer.baidu.com/

條件 - 必須能鏈接互聯網

目的 - 掌握如何使用百度地圖

JS庫或百度地圖

提供的API幫助文檔

提供的Demo示例代碼

學習目的

學習的百度地圖的功能

百度地圖的使用特色

如何使用百度地圖

在HTML頁面中

引入百度地圖的JS

http://api.map.baidu.com/api?v=2.0&ak=祕鑰

定義顯示地圖的容器

在javascript代碼中

建立百度地圖Map對象

var map = new BMap.Map(容器id);

進行地圖的初始化

map.centerAndZoom();

百度地圖的組件

核心類 - Map類

構造器 - BMap.Map(容器id);

方法

centerAndZoom() - 初始化方法

addControl() - 添加控件

addOverlay() - 添加標註

Control類 - 控件類

ScaleControl類 - 表示地圖的比例尺

構造器 - 建立比例尺對象

NavigationControl類 - 表示移動縮放控件

構造器 - 建立移動縮放控件

Overlay類 - 遮蓋物類

Marker類 - 表示地圖的一個標註

構造器 - Marker(point)

Point類 - 標註類

2、拖放(拖拽)API

實現拖拽效果

要拖拽的文件是什麼? - 源元素

要拖拽到哪裏去? - 目標元素

目前實現拖拽效果

使用原生DOM就能實現 - 最麻煩

使用jQuery的插件 - 拖拽效果

HTML5中提供的拖拽功能

HTML5中拖拽

源元素事件

dragstart - 當鼠標開始拖放時被觸發

drag - 當鼠標拖放過程當中,相似於mousemove事件

dragend - 當鼠標結束拖放時被觸發

目標元素事件

dragenter - 當鼠標拖放進入到目標元素內被觸發

dragover - 當鼠標到達目前元素被觸發

爲該事件增長event.preventDefault();

drop - 當鼠標實現拖放效果時被觸發

默認狀況下,該事件沒有被觸發

緣由 - HTML頁面默認狀況下,不容許拖放

稱之爲HTML頁面的默認行爲

解決 - 阻止頁面的默認行爲

事件對象event.preventDefault()方法

dragleave - 當鼠標拖放離開目標元素被觸發

dataTransfer對象

做用 - 相似於window系統的剪切板的功能

功能

能夠將源元素的信息(數據),存儲在這裏

將存儲在該對象的源元素信息,提供給目標元素

方法

setData() - 設置(源元素)數據

在源元素事件中使用

getData() - 獲取設置的數據

在目標元素事件中使用

clearData() - 清除(設置的)數據

全部的數據內容,存儲在瀏覽器內存中

當使用完畢數據內容時,清除

setDragImage()方法

做用 - 修改拖放過程當中,鼠標跟隨的圖片效果

用法 - drag、dragstart等事件

注意 - 實際操做中,該方法幾乎不用

Web Worker

基本內容

單線程與多線程

Worker能夠模擬多線程的效果

定義 - 運行在後臺的javascript

注意 - 不能使用DOM

在Worker中只能使用javascript中的ECMA

目前主流瀏覽器都支持Worker,除IE8以前

Worker提供API

檢測當前瀏覽器是否支持Worker

if( typeof(Worker) !== "undefined" ){

說明當前瀏覽器支持Web Worker

}else{

說明當前瀏覽器不支持Web Worker

}

建立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)，表示已關閉鏈接。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。