html5本地存储web storage的简单使用
2020-12-13 02:13
标签：android des style blog class code html5的一个非常cool的功能，就是web storage，类似于之前的cookie，不过与之不同的是，web storage
拥有本地5兆的容量可以存储，而cookie却只有4K，这是完全不能比的优势。 webstrange又分为：localstorage，sessionstorage和本地数据库。 接下来我就来一一介绍： 1 localstorage localstorage 的使用比较简单，方法有： 一个小demo来展示功能： html 代码： 这样，一个简单的展示localstorage 的 demo就实现了 2 sessionStorage sessionStorage用法与localStorage用法相同，不过sessionStorage在浏览器关闭网站时候就会清除，而localStorage会一直保存至浏览器中，二者酌情配合使用。 3 本地数据库 熟悉IOS/Android开发的同学，应该会对SQLite数据库比较熟悉 html5中对数据库的操作比较简单，主要有openDatabase方法和transaction方法 用一个对象db来接收openDatabase创建的访问数据库的对象 其中 databasename:数据库名 version：数据库版本 可不填 desription：数据库描述 size：数据库分配空间大小 transaction方法用一个回调函数作为参数，在函数中执行具体的访问数据库的方法 executeSql方法的四个参数分别是： html5本地存储web storage的简单使用,搜素材,soscw.com html5本地存储web storage的简单使用 标签：android des style blog class code 原文地址：http://www.cnblogs.com/runningpaul/p/3716038.htmllocalStorage.setItem(key,value);//保存数据
localStorage.getItem(key);//读取数据
localStorage.removeItem(key);//删除单个数据
localStorage.clear();//删除所有数据
key：localStorage.key(index);//得到某个索引的值
1 (function($){
2 $(function(){
3 $.fn.getFormParam=function(){
4 var serializeObj={};
5 var array=this.serializeArray();
6 var str=this.serialize();
7 $(array).each(function(){
8 if(serializeObj[this.name]){
9 if($.isArray(serializeObj[this.name])){
10 serializeObj[this.name].push(this.value);
11 }else{
12 serializeObj[this.name]=[serializeObj[this.name],this.value];
13 }
14 }else{
15 serializeObj[this.name]=this.value;
16 }
17 });
18 return serializeObj;
19 };
20
21 var storageFile =JSON.parse(window.localStorage.getItem(‘demo‘));
22 $.each(storageFile, function(i, val){
23 $(‘#demoForm‘).find(‘[name="‘+i+‘"]‘).val(val);
24 });
25
26 $(‘#demoForm‘).find(‘[type="submit"]‘).on(‘click‘, function(){
27 var data = $(‘#demoForm‘).getFormParam();
28 window.localStorage.setItem(‘demo‘, JSON.stringify(data));
29 return false;
30 });
31 });
32 })(jQuery)
1 doctype html>
2 html lang="zh">
3 head>
4 meta charset="UTF-8">
5 script src="jquery-1.10.2.min.js">script>
6 script src="demo.js">script>
7 title>Documenttitle>
8 head>
9 body>
10 form id="demoForm">
11 p>label>span>姓名span>input name="name">label>p>
12 p>label>span>年龄span>input name="age">label>p>
13 p>label>span>学号span>input name="number">label>p>
14 p>label>span>地址span>input name="address">label>p>
15 p>label>span>爱好span>input name="habit">label>p>
16 p>label>span>其他span>textarea name="big" id="" cols="30" rows="10">textarea>label>p>
17 p>input type="submit" value="提交">p>
18 form>
19 body>
20 html>
1 var db = openDatabase(databasename,version,description,size)
1 db.transaction(function(tx)){
2 tx.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)
3 });