• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 客户端存储杂谈

客户端存储杂谈

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含客户端存储等相关知识,匿名希望在学习及工作中可以帮助到您
客户端存储(client-side storage)的。这是一个通用术语,包含几个独立但相关的 API: Web Storage、Web SQL Database、Indexed Database 和 File Access。每种技术都提供了在用户硬盘上 —— 而非通常存储数据的服务器 —— 存储数据的独特方式。这么做主要基于以下两点理由:(a)使 web app 离线可用; (b)改善性能。对于客户端存储使用情况的详细阐述,请看 HTML5Rocks 上的文章 《"离线": 这是什么意思?我为何要关心?》。

先看看他们的共同之处:

共同特点

基于客户端的存储

实际上,“客户端时间存储”的意思是,数据传给了浏览器的存储 API,它将数据存在本地设备中的一块区域,该区域同样也是它存储其他用户特定信息如个人偏好、缓存的地方。除了存储数据,这些 API 可以用来检索数据,且在某些情况下还能执行搜索和批处理操作。

置于沙盒中的

所有这四个存储 API 都将数据绑到一个单独的“源”(origin)上。

空间限制(Quotas)

你能想象,如果任何网站都被允许往毫不知情的硬盘里填充以千兆字节计的数据,该有多混乱。因此,浏览器对存储容量施加了限制。若你的应用试图超出限制,浏览器通常会显示一个对话框,让用户确认增加。您可能以为浏览器对单个源(origin)可使用的所有存储都加以同一单独的限制,但多数存储机制都是单独加以限制的。若 Quota API 被采纳,这种情况可能会改变。但就现在来说,把浏览器当作一个二维矩阵,其维度分别是“源”(origin)和“存储”(storage)。abc.example可能会允许最多存 5MB 的 Web Storage, 25MB 的 Web SQL 数据库,但因用户拒绝访问被禁止使用 Indexed DataBase。 Quota API 将问题放到一起来看,让您查询还有多少可用空间,有多少空间正在使用。

有些情况下,用户也能先看到有多少存储将被使用,例如,当用户在 Chrome 应用商店中安装一个应用时,他们将被提示预先接受其权限,其中包括存储限制。(而该应用的)manifest 中的可能有个值是 “unlimited_storage” (无限制存储)。

数据库处理(Transactions)

两个 “数据库” 的存储格式支持数据处理。目的和通常的关系型数据库使用数据处理是一样的:保证数据库完整。数据库处理(Transactions)防止 “竞争条件”(race conditions) —— 这种情况是:当两个操作序列在同一时间被应用到数据库中, 导致操作结果都无法被预测,而数据库也处于可疑的准确性(dubious accuracy)状态。

同步和异步模式(Synchronous and Asynchronous Modes)

多数存储格式都支持同步和异步模式。同步模式是阻塞的,意味着下一行 js 代码执行之前,存储操作会被完整执行。异步模式会使得后面的 js 代码在数据库操作完成之前执行。存储操作会背景环境中执行,当操作完成的时候,应用会以回调函数被调用这种形式接收通知,这个函数须在调用的时候被指定。

应当尽量避免使用同步模式,它虽然看起来比较简单,但操作完成时它会阻塞页面渲染,在某些情况下甚至会冻结整个浏览器。你可能注意到网站乃至是应用出现这种情况,点击一个按钮,结果所有东西都用不了,当你还在想是不是崩溃了?结果一切又突然恢复正常了。

某些 API 没有异步模式,如 “localStorage”, 使用这些API时,应当仔细做好性能监测,并随时准备切换到一个异步API,如果它造成了问题。

API 概述及比较

Web Storage

Web Storage 是一个叫做 localStorage 的持久对象。可以使用 localStorage.foo = "bar" 保存值,之后可以使用 localStorage.foo 获取到 —— 甚至是浏览器关闭之后重新打开。还可以使用一个叫做 sessionStorage 的对象,工作方式一样,只是当窗口关闭之后会被清除掉。

Web Storage 是 NoSQL 键值对储存(NoSQL key-value store)的一种.

Web Storage 的优点

数年以来,被所有现代浏览器支持, iOS 和 Android 系统下也支持(IE 从 IE8 开始支持 )。

简单的API签名。

同步 API,调用简单。

语义事件可保持其他标签和窗口同步。

Web Storage 的弱点

使用同步 API(这是得到最广泛支持的模式)存储大量的或者复杂的数据时性能差。

缺少索引导致检索大量的或复杂的数据时性能差。(搜索操作需要手动遍历所有项。)

存储或读取大量的或复杂的数据结构时性能差,因为需要手动序序列化成字符串或将字符串反序列化。主要的浏览器实现只支持字符串(尽管规范没这么说的)。

需要保证数据的持续性和完整性,因为数据是有效非结构化(effectively unstructured)的。

Web SQL

您可能想查找下面的文章:

相关文章

  • 2018-12-03百度搜索“2012世界末日”的效果是Javascript还是纯html5做出来的?
  • 2018-12-03扁平化的bootstrap
  • 2018-12-03HTML5新增的Css选择器、伪类介绍_html5教程技巧
  • 2018-12-03AR技术可以通过H5实现吗?不通过APP
  • 2018-12-03具体解析HTML5文件读取FileReader及文件读取模块的封装
  • 2018-12-03H5段落的使用方法
  • 2017-08-06html5指南-3.如何实现html元素拖拽功能
  • 2018-12-03LESS-Middleware:Node.js 和 LESS 的完美搭配
  • 2018-12-03利用Canvas模仿百度贴吧客户端loading小球的方法
  • 2018-12-03 小强的HTML5移动开发之路(19)——HTML5 Local Storage(本地存储)

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 大公司或专业团队目前流行的前端工具有什么?
    • HTML5 的百度百科词条中,有一个中间是对勾,边缘圆锯齿状图标,是什么?
    • canvas实现的骨骼动画
    • 用Canvas绘制贝赛尔曲线
    • HTML5新增加的功能详解
    • 请问如何从头开始学习制作一款HTML5 小游戏?
    • HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)_html5教程技巧
    • 新浪微博的 HTML5 页面体验已经和 native app 差不多了,是否意味着 HTML5 可以取代 native 了?
    • 关于HTML5音频与视频的详细介绍
    • 关于 HTML5 的七个传说小结_html5教程技巧

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有