文档章节

Web - 客户端存储的几种方式

elenahu
 elenahu
发布于 2014/10/12 12:21
字数 1102
阅读 18
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

客户端存储主要方便一些APP离线使用。今天就来说说客户端存储的方法有多少?
说在最前面的一句:所有的客户端存储都有一个原则:读写的数据必须要同域

1 Cookie

Cookie是一项很老的技术的,就是因为它老,所以兼容性还是不错的。常见的JS操作Cookie的代码如下:

function setCookie(c_name,value,expiredays)
{
  var exdate=new Date()
  exdate.setDate(exdate.getDate()+expiredays)
  document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
function getCookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=")
  if (c_start!=-1)
    { 
    c_start=c_start + c_name.length+1 
    c_end=document.cookie.indexOf(";",c_start)
    if (c_end==-1) c_end=document.cookie.length
    return unescape(document.cookie.substring(c_start,c_end))
    } 
  }
return ""
}

代码是从W3school那里扣过来的,大半夜了我也就不知道写了,请原谅我。
使用Cookie作为本地存储优点:兼容性好,缺点:操作繁琐,只能存简单的数据,还会过期,站点设置httponly的话,JS就不无法操作Cookie了

2 Web Storage

WebStorage是HTML5中为WebApplication提供一种存储的API,目前主流的新版本的浏览器都支持,当然IE789你就没有办法了。WebStorage主要分成localStorage和sessionStorage两种。

sessionStorage 是个全局对象,它维护着在页面会话(page session)期间有效的存储空间。只要浏览器开着,页面会话周期就会一直持续。当页面重新载入(reload)或者被恢复(restores)时,页面会话也是一直存在的。每在新标签或者新窗口中打开一个新页面,都会初始化一个新的会话。

localStorage也是一个全局变量,它的生命周期比sessionStorage长。localStorage和sessionStorage都继承自Storage因此它们的用法相同。

interface Storage {
  readonly attribute unsigned long length;
  [IndexGetter] DOMString key(in unsigned long index);
  [NameGetter] DOMString getItem(in DOMString key);
  [NameSetter] void setItem(in DOMString key, in DOMString data);
  [NameDeleter] void removeItem(in DOMString key);
  void clear();
};
// 保存数据到当前会话的存储空间
sessionStorage.setItem("username", "John");
// 访问数据
alert( "username = " + sessionStorage.getItem("username"));

WebStorage的优点:使用简单方便,缺点:IE有些版本不支持,不能存复杂的对象,必须先转化成JSON字符串,没有索引搜索效率不高,只能同步读写操作,当写入的数据比较大时可能造成JS引擎堵塞。

3 IndexedDB

IndexedDB是一种基于Javascript对象继承的数据库,它支持事务,同时支持异步和同步读写。IndexedDB中可以存入对象,当然对象要能够结构化克隆(structured clone),同时它还提供索引功能,极大地提高了搜索的效率。通常来说IndexedDB的大小是没有限制,当大小超过50MB的时候,浏览器会弹出对话框来询问用户是否增加数据的大小。

var request = window.indexedDB.open("CandyDB",
                                    "My candy store database");
request.onsuccess = function(event) {
  var db = event.result;
  if (db.version != "1") {
    // User's first visit, initialize database.
    var createdObjectStoreCount = 0;
    var objectStores = [
      { name: "kids", keyPath: "id", autoIncrement: true },
      { name: "candy", keyPath: "id", autoIncrement: true },
      { name: "candySales", keyPath: "", autoIncrement: true }
    ];
 
    function objectStoreCreated(event) {
      if (++createdObjectStoreCount == objectStores.length) {
        db.setVersion("1").onsuccess = function(event) {
          loadData(db);
        };
      }
    }
 
    for (var index = 0; index < objectStores.length; index++) {
      var params = objectStores[index];
      request = db.createObjectStore(params.name, params.keyPath,
                                     params.autoIncrement);
      request.onsuccess = objectStoreCreated;
    }
  }
  else {
    // User has been here before, no initialization required.
    loadData(db);
  }
};
var kids = [
  { name: "Anna" },
  { name: "Betty" },
  { name: "Christine" }
];
 
var request = window.indexedDB.open("CandyDB",
                                    "My candy store database");
request.onsuccess = function(event) {
  var objectStore = event.result.objectStore("kids");
  for (var index = 0; index < kids.length; index++) {
    var kid = kids[index];
    objectStore.add(kid).onsuccess = function(event) {
      document.getElementById("display").textContent =
        "Saved record for " + kid.name + " with id " + event.result;
    };
  }
};

优点:支持事务,支持索引,可以存入对象,效率也不错。缺点:使用有些麻烦,上手需要一定时间

4 FileAPI

在最新版的MDN和w3c中FileAPI相关的文档只看到了FileReader相关介绍,这个API可以结合File表单和Formdata 从而实现异步上传文件。因为没有FileWriter相关文档说明,我们这里暂时认为FileAPI不能实现客户端存储这个要求

function startRead() {  
  // obtain input element through DOM 
  
  var file = document.getElementById('file').files[0];
  if(file){
    getAsText(file);
  }
}

function getAsText(readFile) {
        
  var reader = new FileReader();
  
  // Read file into memory as UTF-16      
  reader.readAsText(readFile, "UTF-16");
  
  // Handle progress, success, and errors
  reader.onprogress = updateProgress;
  reader.onload = loaded;
  reader.onerror = errorHandler;
}

function updateProgress(evt) {
  if (evt.lengthComputable) {
    // evt.loaded and evt.total are ProgressEvent properties
    var loaded = (evt.loaded / evt.total);
    if (loaded < 1) {
      // Increase the prog bar length
      // style.width = (loaded * 200) + "px";
    }
  }
}

function loaded(evt) {  
  // Obtain the read file data    
  var fileString = evt.target.result;
  // Handle UTF-16 file dump
  if(utils.regexp.isChinese(fileString)) {
    //Chinese Characters + Name validation
  }
  else {
    // run other charset test
  }
  // xhr.send(fileString)     
}

function errorHandler(evt) {
  if(evt.target.error.name == "NotReadableError") {
    // The file could not be read
  }
}

5 参考

  1. https://developer.mozilla.org/zh-CN/docs/Web/Guide/API/DOM/Storage/Storage
  2. https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
  3. https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm
  4. https://developer.mozilla.org/en-US/docs/Web/API/FileReader
  5. http://www.w3.org/TR/FileAPI/
  6. http://www.w3.org/TR/file-writer-api/
elenahu

elenahu

粉丝 6
博文 19
码字总数 0
作品 0
深圳
技术主管
私信 提问
加载中
请先登录后再评论。
树莓派(Raspberry Pi):完美的家用服务器

自从树莓派发布后,所有在互联网上的网站为此激动人心的设备提供了很多有趣和具有挑战性的使用方法。虽然这些想法都很棒,但树莓派( RPi )最明显却又是最不吸引人的用处是:创建你的完美家用...

异次元
2013/11/09
5.1K
8
Web开发组件管理器--Bower

Bower 是一个针对Web开发的包管理器。该工具主要用来帮助用户轻松安装CSS、JavaScript、图像等相关包,并管理这些包之间的依赖。 功能有些类似于Component。不同之处是,Component是围绕Git...

匿名
2013/02/01
1.2W
2
C/C++ 代码文档生成器--cldoc

cldoc 是一个使用 clang 实现的 C/C++ 代码文档生成器。 特点: 使用 clang 可靠解析大多数复杂的 C++ 项目 零配置 使用 markdown 做为文档格式 生成描述 API 的 XML 文档 使用简单格式用于文...

匿名
2013/02/14
1.4K
0
集群存储系统--YFS

YFS集群存储系统由多个元数据服务器(MDS)、多个块数据服务器(CDS)和多个客户端(client)互联组成集群; 数据被分成64M固定大小的数据块(Chunk),每个数据块在CDS本地以常规文件的形式...

匿名
2013/02/19
1.7K
0
Web 的 SSH 控制台--KeyBox

KeyBox 是一个基于 Web 的 SSH 控制台,用于同步管理多个系统并且可执行远程命令。允许你共享终端命令并上传文件到所有系统。但连接会话打开时你可选择在其中一个终端或者多个终端上执行命令...

匿名
2013/02/28
8.3K
0

没有更多内容

加载失败,请刷新页面

加载更多

TensorFlow 机器学习秘籍中文第二版·翻译完成

原文:TensorFlow Machine Learning Cookbook 协议:CC BY-NC-SA 4.0 不要担心自己的形象,只关心如何实现目标。——《原则》,生活原则 2.3.c 在线阅读 ApacheCN 面试求职交流群 724187166 ...

布客飞龙
14分钟前
9
0
gin 怎么写个简单的中间件

gin 写个简单中间件,直接上例子: func GinServer() {engine := gin.Default()engine.Use(TestMiddleware)engine.GET("/", func(context *gin.Context) {context.JSON(http.......

is晓歌
18分钟前
12
0
查找算法——插值查找

对于有序的查找表,除了顺序查找、折半查找、斐波那契查找,还可以使用插值查找,对于元素分布较为均匀的查找表,插值查找的性能更优。不妨设想一下存在这样子的序列[10, 12, 14, 16, 18],以...

城北徐公美
21分钟前
20
0
asm 数组的双向传递

asm目前测试中比js大概能快 1.2 - 1.5倍左右 c/c++ 能快1.7 - 2.3 倍左右 asm的最大优势还是书写可以使用类似ts的语法, 比go和c系更加方便, 学习和改造已有工具的成本不大 但是性能还是问题,...

阿豪boy
27分钟前
26
0
为什么国内流行的 MyBatis ,国外 Java 工程师却不愿意使用?

Spring 团队的Josh Long自己在Twitter上做了一个调查。1625次投票,样本量不算大,但也能说明问题。和我答案最后的那些调查图表基本一致。 我们看一下Google Trends的数据: 搜索条件是这样的...

码农突围
34分钟前
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部