html5中文学习网

您的位置: 首页?>?html5二元倍投表?>?高级应用 ? 正文

html5本地存储 localStorage操作使用详解_html5二元倍投表技巧

[ ] 已经帮助:人解决问题

1、html5几种存储形式KKwHTML5中文学习网 - HTML5先行者学习网

?? 本地存储(localStorage && sessionStorage)KKwHTML5中文学习网 - HTML5先行者学习网

?? 离线缓存(application cache)KKwHTML5中文学习网 - HTML5先行者学习网

?? indexedDB 和 webSQLKKwHTML5中文学习网 - HTML5先行者学习网

2、localStorage && sessionStorageKKwHTML5中文学习网 - HTML5先行者学习网

?? 过期时间:localStorage 永久存储,永不失效除非手动删除KKwHTML5中文学习网 - HTML5先行者学习网

???????????????? sessionStorage 浏览器重新打开后就消失了KKwHTML5中文学习网 - HTML5先行者学习网

?? 大小:每个域名是5MKKwHTML5中文学习网 - HTML5先行者学习网

3、localStorage API和sessionStorage API一致KKwHTML5中文学习网 - HTML5先行者学习网

?? getItem //取记录KKwHTML5中文学习网 - HTML5先行者学习网
?? setIten//设置记录KKwHTML5中文学习网 - HTML5先行者学习网
?? removeItem//移除记录KKwHTML5中文学习网 - HTML5先行者学习网
?? key//取key所对应的值KKwHTML5中文学习网 - HTML5先行者学习网
?? clear//清除记录KKwHTML5中文学习网 - HTML5先行者学习网

4、存储的内容KKwHTML5中文学习网 - HTML5先行者学习网

?? 数组,图片,json,样式,脚本。。。(只要是能序列化成字符串的内容都可以存储)KKwHTML5中文学习网 - HTML5先行者学习网

5、localStorage实例KKwHTML5中文学习网 - HTML5先行者学习网

JavaScript Code复制内容到剪贴板
  1. ??
  2. ??
  3. <>"Content-Type"?content="text/html;?charset=utf-8"?/> ??
  4. <>"Access-Control-Allow-Origin"?content="anonymous"> ??
  5. locstorage?图片存储 ??
  6. ??
  7. ??
??
  • ??
  • ???
  • 上述方法可以在火狐和chrome运行,运行例子如图:KKwHTML5中文学习网 - HTML5先行者学习网

    KKwHTML5中文学习网 - HTML5先行者学习网

    KKwHTML5中文学习网 - HTML5先行者学习网
    ?KKwHTML5中文学习网 - HTML5先行者学习网
    我们现在看下资源里面是如何存储的,如图:KKwHTML5中文学习网 - HTML5先行者学习网
    ?KKwHTML5中文学习网 - HTML5先行者学习网

    KKwHTML5中文学习网 - HTML5先行者学习网

    KKwHTML5中文学习网 - HTML5先行者学习网
    此时无论如何刷新页面和重新打开浏览器,刚才存储的图片都是存在的,除非手动删除!KKwHTML5中文学习网 - HTML5先行者学习网

    6、locstorage 过期策略KKwHTML5中文学习网 - HTML5先行者学习网

    由于html5没有给本地存储设置过期策略,那么在处理图片的过期策略的时候可以编写自己过期策略程序,如下:KKwHTML5中文学习网 - HTML5先行者学习网

    JavaScript Code复制内容到剪贴板
    1. ??
    2. ??
    3. <>"Content-Type"?content="text/html;?charset=utf-8"?/> ??
    4. <>"Access-Control-Allow-Origin"?content="anonymous"> ??
    5. locstorage?过期策略 ??
    6. ??
    7. ??
    8. ??
    9. ??
    10. ???

    使用操作如下图所示:KKwHTML5中文学习网 - HTML5先行者学习网

    KKwHTML5中文学习网 - HTML5先行者学习网

    看下本地存储的结果KKwHTML5中文学习网 - HTML5先行者学习网

    KKwHTML5中文学习网 - HTML5先行者学习网

    上述简单的例子可以操作html5本地存储的功能,感觉html5在本地存储方面还是很方便的!KKwHTML5中文学习网 - HTML5先行者学习网

    来顶一下
    返回首页
    返回首页
    (责任编辑:)
    推荐书籍
    推荐资讯
    关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助