H5提供了两种在客户端存储数据的方式:
localStorage 持久化的本地存储(浏览器关闭重新打开数据依然存在)
sessionStorage 针对一个session的本地存储
之前这些都是由cookie来完成的,cookie的特点是存储量小,在服务器和客户端之间来回传递,传输效率不高。一般可以在判断注册的用户是否登录该本网站。
webStorage API 继承于Window对象,并提供了两个新的属性-Window.localStorage 和 Window.sessionStorage.
webStorage的优势:

  1. 相比cookie存储容量增加
  2. 可以将请求的表单数据存于本地,减少http请求,节约带宽
  3. webStorage拥有易用的API

webStorage的局限性:

  1. 不同浏览器webStorage 和LocalStorage的大小不统一。
  2. 在浏览器的隐私模式下面是不可读取的
  3. 本质上是对字符串的读取,因此存储内容过多时页面会变卡
  4. 不能被爬虫抓取到

使用webStorage
1.存储数据:
  localStorage.name = 'value';
  localStorage['name'] = 'value';
  localStorage.setItem('name','value');
  注意键和值总是字符串。建议使用webStorage API(setItem,getItem,removeItem,key,length)
2.获取数据:
  var value = localStorage.getItem('name');
  var value = localStorage.name;
  var value = localStorage['name'];
3.删除数据:
  清空所有数据
    localStorage.clear();
  删除特定数据;
    localStorage.removeItem('name');
4.检测浏览器是否支持:
  function storageAvailable(type) {
    try {
      var storage = window[type],
      x = '__storage_test__';
      storage.setItem(x, x);
      storage.removeItem(x);
      return true;
    }
    catch(e) {
      return false;
    }
  }
  if (storageAvailable('localStorage')) {
    // Yippee! We can use localStorage awesomeness
  }
  else {
    // Too bad, no localStorage for us
  }
5.就是存储对象了,我们需要进行转换为字符串存入,等到使用的时候取出再转为对象。
  var str = JSON.stringify(obj);
  localStorage.mydata = str;
  var obj = JSON.parse(localStorage.mydata);
到这里就结束了,算是对webStorage基本使用的一些小总结,希望可以对你有所帮助。

H5 web 存储之 Webstorage的更多相关文章

  1. web存储之webstorage

    web存储分类 客户端和服务端 认识web存储 随着web应用的发展,是的客户端存储的用途越来越多,然而实现客户端端存储的方式也是越来越多样化.最简单最兼容的方式就是cookie,但作为真正的客户端存 ...

  2. H5 web存储

    H5提供了两种在客户端存储数据的方式:localStorage 持久化的本地存储(浏览器关闭重新打开数据依然存在)sessionStorage 针对一个session的本地存储之前这些都是由cooki ...

  3. 08. Web大前端时代之:HTML5+CSS3入门系列~H5 Web存储

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html  

  4. H5本地存储技术

    H5 Web存储技术 前言 web存储技术在初期的时候被定义为HTML5的一部分作为其API.后来被独立出来作为一份独立的标准. web存储标准包含localStorage对象和sessionStor ...

  5. Atitit.h5 web webview性能提升解决方案-----fileStrore缓存离线存储+http方案

    Atitit.h5 web webview性能提升解决方案-----fileStrore缓存离线存储+http方案 1. 业务场景 android+webview h5 css背景图性能提升1 2. ...

  6. 一文梳理Web存储,从cookie,WebStorage到IndexedDB

    前言 HTTP是无状态的协议,网络早期最大的问题之一是如何管理状态.服务器无法知道两个请求是否来自同一个浏览器.cookie应运而生,开始出现在各大网站,然而随着前端应用复杂度的提高,Cookie 也 ...

  7. H5本地存储(转)

    H5本地存储  一.本地存储由来的背景         众所周知Html4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是 ...

  8. HTML5本地化应用开发-HTML5 Web存储详解

    文章不是简单的的Ctrl C与V,而是一个字一个标点符号慢慢写出来的.我认为这才是是对读者的负责,本教程由技术爱好者成笑笑(博客:http://www.chengxiaoxiao.com/)写作完成. ...

  9. HTML5 Web存储(Web Storage)技术及用法

    在如今的Web开发中,HTML5是大家讨论的最大一个话题.HTML5提供的新功能特征使得Web程序员如虎添翼,并免去了以往钻研各种方法来让网站更好.更快.更灵活的气力.这些新功能中有一个非常让我感兴趣 ...

随机推荐

  1. 深入浅出node.js

    http://www.infoq.com/cn/articles/what-is-nodejs/

  2. String,StringBuilder,StringBuffer的对比测试

    public class TestString { private static final int COUNT = 10000000; public static void main(String ...

  3. oracle的神奇化学反应(行转列+获取表字段)

    橘子+汽水=橘子汽水,∑(゚Д゚ノ)ノ好无聊!!! 火鸡+烤架=烤火鸡,ლ(´ڡ`ლ)还不错. wm_concat()+表字段查询=(✪ω✪)会是啥呢? wm_concat()函数,该函数可以把列值以 ...

  4. c# post basic 接口

    string url = "http://xxxxxxxxx";//地址,请反复检查地址的准确性 string usernamePassword = "username: ...

  5. 如何用Ettercap实现“中间人攻击”(附下载链接)

    什么是“中间人攻击”? 中间人攻击(Man-in-the-Middle Attack,简称“MiTM攻击”)是一种“间接”的入侵攻击,这种攻击模式是通过各种技术手段将受入侵者控制的一台计算机虚拟放置在 ...

  6. Android ec环境配置

    ec环境配置 1.0概述 鉴于很多同事,或者新从事android开发,虽然会做android的开发,但是会遇见一些最基本的环境搭建问题,本文仅作为(win7 64位系统)eclipse中集成andro ...

  7. 【CSS Cookbook】笔记摘要(一)

    概要 CSS的优点:将表现和内容相分离:更好地控制页面布局:大大减少了文件尺寸:缩短了改版时间:提高了易用性. CSS全称层叠式样表(Cascading Style Sheets). 1.问题:如何最 ...

  8. iOS textfield 限制输入字数长度

    iOS textfield限制输入的最大长度 [self.textFiled addTarget:self action:@selector(textFieldDidChange:) forContr ...

  9. 五、 创建连接串连接本地数据库(ASP.NET MVC5 系列)

    1. 创建连接串连接本地SQLServer数据库 上节讲到MovieDBContext类,这个类的作用是连接数据库并将Movie对象迁移到数据库记录中.不过你会问一个问题:如何知道这个对象将连接哪个数 ...

  10. java zip4j 内存文件和磁盘文件 压缩和加密

    经常服务器需要对文件进行压缩,网络上流传较多的是从磁盘文件中来压缩成zip文件.但是常常服务器的文件存放在内存中,以byte[]形式存储在内存中.这个时候就不能使用网络上流传的常用方法了,这里就需要对 ...