移動端開發-Day2

時間 2019-11-19

標籤移動開發 day2 day 欄目無線简体版

原文原文鏈接

隨手記應用javascript

<html>
<head>
<meta charset="utf-8" />
<title>隨手記</title>
</head>
<body>
<h2>隨手記--本地保存</h2>
<div>
    <textarea id="content" cols="100" rows="20"></textarea>
</div>
</body>
</html>

<script type="text/javascript">
// 存儲數據
localStorage.setItem('key', '須要存儲的數據');
// 獲取數據
var value = localStorage.getItem('key'); // 刪除數據 localStorage.removeItem('key'); // 存儲數據 localStorage['key1'] = 'value1'; localStorage.key2 = 'value2'; // 獲取數據 var value1 = localStorage['key1']; var value2 = localStorage.key2; // 遍歷全部存儲的數據 for(var i=0;i<localStorage.length;i++){ // 獲取key var key = localStorage.key(i); // 獲取value var value = localStorage.getItem(key); // 打印到控制檯  console.log(key, value); } // 清空全部數據 localStorage.clear(); // 獲取記錄內容的文本域 var el = document.querySelector('#content'); // 頁面載入時，從本地獲取存儲的數據 el.value = localStorage.getItem('data') || ''; // 爲文本域DOM節點添加blur事件 el.addEventListener('blur', function(){ // 獲取文本域的內容 var data = el.value; // 保存到本地 localStorage.setItem('data', data); }); </script>

https://gitee.com/happylittlefish/Efficient-Mobile-Web-FE-Development/tree/master/%E7%AC%AC3%E7%AB%A0html

離線以後資源如何更新——service workerhtml5

service worker提供功能：java

後臺消息傳遞git

網絡代理canvas

離線緩存緩存

消息推送cookie

通用數據存儲方案網絡

html5以前是將數據存儲在cookie中，弊端:大小4k，性能差session

html5以後localstorage（一直存儲在本地，手動清除）、sessionstorage（活在生命週期，自動清除）

用法：

//存儲數據
localStorage.setItem（'key'，'須要存儲的數據'）；
//獲取數據
var value = localStorage.getItem（'key'）;
//刪除數據
localStorage.removeItem（'key'）;

還能夠索引的方式操做

localStorage['key1']='value1';

localStorage.key2=value2;

也能夠循環遍歷

也能夠清空這些數據

localStorage.clear();

Canvas、SVG和WebGL

使用canvas：

一、html中引入canvas標籤

二、

相關標籤/搜索

每日一句

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