UDN-企业互联网技术人气社区

板块导航

浏览  : 1443
回复  : 3

[HTML5] html5本地存储之localstorage

[复制链接]
友美C_cup的头像 楼主
本帖最后由 友美C_cup 于 2015-8-5 13:59 编辑

localstorage 的使用比较简单,方法有:


  1. localStorage.setItem(key,value);//保存数据
  2. localStorage.getItem(key);//读取数据
  3. localStorage.removeItem(key);//删除单个数据
  4. localStorage.clear();//删除所有数据
  5. key:localStorage.key(index);//得到某个索引的值</font>
复制代码


一个小demo来展示功能:


  1. <span style="text-indent: 0px;">(function($){</span>
  2. <span style="text-indent: 0px;">$(function(){</span>
  3. <span style="text-indent: 0px;">$.fn.getFormParam=function(){</span>
  4. <span style="text-indent: 0px;">var serializeObj={};</span>
  5. <span style="text-indent: 0px;">var array=this.serializeArray();</span>
  6. <span style="text-indent: 0px;">var str=this.serialize();</span>
  7. <span style="text-indent: 0px;">$(array).each(function(){</span>
  8. <span style="text-indent: 0px;">if(serializeObj[this.name]){</span>
  9. <span style="text-indent: 0px;">if($.isArray(serializeObj[this.name])){</span>
  10. <span style="text-indent: 0px;">serializeObj[this.name].push(this.value);</span>
  11. <span style="text-indent: 0px;">}else{</span>
  12. <span style="text-indent: 0px;">serializeObj[this.name]=[serializeObj[this.name],this.value];</span>
  13. <span style="text-indent: 0px;">}</span>
  14. <span style="text-indent: 0px;">}else{</span>
  15. <span style="text-indent: 0px;">serializeObj[this.name]=this.value;</span>
  16. <span style="text-indent: 0px;">}</span>
  17. <span style="text-indent: 0px;">});</span>
  18. <span style="text-indent: 0px;">return serializeObj;</span>
  19. <span style="text-indent: 0px;">};</p><p> var storageFile =JSON.parse(window.localStorage.getItem('demo'));</span>
  20. <span style="text-indent: 0px;">$.each(storageFile, function(i, val){</span>
  21. <span style="text-indent: 0px;">$('#demoForm').find('[name="'+i+'"]').val(val);</span>
  22. <span style="text-indent: 0px;">});</p><p> $('#demoForm').find('[type="submit"]').on('click', function(){</span>
  23. <span style="text-indent: 0px;">var data = $('#demoForm').getFormParam();</span>
  24. <span style="text-indent: 0px;">window.localStorage.setItem('demo', JSON.stringify(data));</span>
  25. <span style="text-indent: 0px;">return false;</span>
  26. <span style="text-indent: 0px;">});</span>
  27. <span style="text-indent: 0px;">});</span>
  28. <span style="text-indent: 0px;">})(jQuery)</span></span></p>
复制代码

html 代码:


  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>Document</title>
  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></font>
复制代码

这样,一个简单的展示localstorage 的 demo就实现了


相关帖子

发表于 2015-8-10 19:39:03 | 显示全部楼层
又见楼主分享帖子
使用道具 举报

回复

发表于 2015-8-14 10:15:18 | 显示全部楼层
纯粹路过,没任何兴趣,仅仅是看在老面孔的份上回复一下
使用道具 举报

回复

发表于 2015-8-14 20:35:55 | 显示全部楼层
前排支持下
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部