移动端开发-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标签

二、