本地存儲localStorage

設置存儲內容setItem(key,value)

localStorage.setItem('leo','23');

更新存儲內容

對象[key]=value

對象.key=value

localStorage.leo = 25;

localStorage['leo'] = 24;

獲取存儲內容getItem(key)

console.log(localStorage.getItem('leo'))

刪除存儲內容removeItem(key)

localStorage.removeItem('leo');

清空存儲內容clear()

localStorage.clear();

獲取存儲內容長度

console.log(localStorage.length);

sessionStorage

sessionStorage.a = 10;

console.log(sessionStorage);

localStorage與sessionStorage的區別

localStorage：

存儲會持久化

容量2-5MB

sessionStorage：

在網頁會話結束后失效

容量不一，部分瀏覽器不設限

Storage使用注意：

1、存儲容量超出限制，需要使用try catch捕獲異常

2、存儲類型限制：只能是字符串

3、sessionStorage失效機制：

刷新頁面不能使sessionStorage失效

相同URL不同標簽頁不能共享sessionStorage

鼠標點擊掉血游戲案例：

*{margin:0;padding:0;list-style:none;}body{position:relative;height:100%;}html{height:100%;}.guai{position:absolute;left:50%;top:50%;margin:-75px 0 0 -100px;}.line{width:400px;height:20px;border:4px solid black;position:absolute;left:50%;top:20px;margin:0 0 0 -204px;}.xie{width:400px;height:100%;background:red;transition:.3s;}

總結

以上是生活随笔為你收集整理的html5简单游戏案例,HTML5存储（带一个粗糙的打怪小游戏案例）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。