前端几种存储方式的总结-爱编程
前端几种存储方式的总结
接下来要好好总结一些知识，秋招来啦。。。虽然有好多知识都不大会，但是还是要努力一下，运气这种东西，谁知道呢~
h5之前，存储主要是用cookies。cookies缺点有在请求头上带着数据，大小是4k之内。主Domain污染。
主要应用：购物车、客户登录
对于IE浏览器有UserData，大小是64k,只有IE浏览器支持。
解决4k的大小问题
解决请求头常带存储信息的问题
解决关系型存储的问题
1.本地存储localstorage
存储方式：
以键值对(Key-Value)的方式存储，永久存储，永不失效，除非手动删除。
每个域名5M
支持情况：
注意：IE9&localStorage不支持本地文件，需要将项目署到服务器，才可以支持！
检测方法：
if(window.localStorage){
alert('This browser supports localStorage');
alert('This browser does NOT support localStorage');
常用的API：
getItem //取记录
setIten//设置记录
removeItem//移除记录
key//取key所对应的值
clear//清除记录
存储的内容：
数组，图片，json，样式，脚本。。。（只要是能序列化成字符串的内容都可以存储）
2.本地存储sessionstorage
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的，区别在于 sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存。
3.离线缓存（application cache）
本地缓存应用所需的文件
使用方法：
①配置manifest文件
&!DOCTYPE HTML&
&html manifest="demo.appcache"&
Manifest 文件：
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：
①CACHE MANIFEST&- 在此标题下列出的文件将在首次下载后进行缓存
②NETWORK&- 在此标题下列出的文件需要与服务器的连接，且不会被缓存
③FALLBACK&- 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
完整demo：
CACHE MANIFEST
/theme.css
/html/ /offline.html
服务器上：manifest文件需要配置正确的MIME-type，即 "text/cache-manifest"。
&mime-mapping&
&extension&manifest&/extension&
&mime-type&text/cache-manifest&/mime-type&
&/mime-mapping&
核心是applicationCache对象，有个status属性，表示应用缓存的当前状态：
0（UNCACHED）&:& 无缓存， 即没有与页面相关的应用缓存
1（IDLE）&:&闲置，即应用缓存未得到更新
2 （CHECKING）&:&检查中，即正在下载描述文件并检查更新
3 （DOWNLOADING）&:&下载中，即应用缓存正在下载描述文件中指定的资源
4 （UPDATEREADY）&:&更新完成，所有资源都已下载完毕
5 （IDLE）&:& 废弃，即应用缓存的描述文件已经不存在了，因此页面无法再访问应用缓存
相关的事件：
表示应用缓存状态的改变：
checking : 在浏览器为应用缓存查找更新时触发
error&:&在检查更新或下载资源期间发送错误时触发
noupdate : 在检查描述文件发现文件无变化时触发
downloading : 在开始下载应用缓存资源时触发
progress：在文件下载应用缓存的过程中持续不断地下载地触发
updateready : 在页面新的应用缓存下载完毕触发
cached : 在应用缓存完整可用时触发
Application Cache的三个优势：
① 离线浏览
② 提升页面载入速度
③ 降低服务器压力
注意事项：
1.&浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）2. 如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存3. 引用manifest的html必须与manifest文件同源，在同一个域下4.&浏览器会自动缓存引用manifest文件的HTML文件，这就导致如果改了HTML内容，也需要更新版本才能做到更新。
5. manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面
6. FALLBACK中的资源必须和manifest文件同源7. 更新完版本后，必须刷新一次才会启动新版本（会出现重刷一次页面的情况），需要添加监听版本事件。8. 站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问9. 当manifest文件发生改变时，资源请求本身也会触发更新
离线缓存与传统浏览器缓存区别：
1. 离线缓存是针对整个应用，浏览器缓存是单个文件
2. 离线缓存断网了还是可以打开页面，浏览器缓存不行
3. 离线缓存可以主动通知浏览器更新资源
关系数据库，通过SQL语句访问
Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。
支持情况：
&Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。
核心方法：
①openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
②transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
③executeSql：这个方法用于执行实际的 SQL 查询。
打开数据库：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024,fn);
//openDatabase() 方法对应的五个参数分别为：数据库名称、版本号、描述文本、数据库大小、创建回调
执行查询操作：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
插入数据：　
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
tx.executeSql('INSERT INTO WIN (id, name) VALUES (1, "winty")');
tx.executeSql('INSERT INTO WIN (id, name) VALUES (2, "LuckyWinty")');
读取数据：
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM WIN', [], function (tx, results) {
var len = results.rows.length,
msg = "&p&查询记录条数: " + len + "&/p&";
document.querySelector('#status').innerHTML +=
for (i = 0; i & i++){
alert(results.rows.item(i).name );
由这些操作可以看出，基本上都是用SQL语句进行数据库的相关操作，如果你会MySQL的话，这个应该比较容易用。
5.IndexedDB
索引数据库 (IndexedDB) API（作为 HTML5 的一部分）对创建具有丰富本地存储数据的数据密集型的离线 HTML5 Web 应用程序很有用。同时它还有助于本地缓存数据，使传统在线 Web 应用程序（比如移动 Web 应用程序）能够更快地运行和响应。
在IndexedDB大部分操作并不是我们常用的调用方法，返回结果的模式，而是请求&&响应的模式，比如打开数据库的操作
这样，我们打开数据库的时候，实质上返回了一个DB对象，而这个对象就在result中。由上图可以看出，除了result之外。还有几个重要的属性就是onerror、onsuccess、onupgradeneeded（我们请求打开的数据库的版本号和已经存在的数据库版本号不一致的时候调用）。这就类似于我们的ajax请求那样。我们发起了这个请求之后并不能确定它什么时候才请求成功，所以需要在回调中处理一些逻辑。
关闭与删除：
function closeDB(db){
db.close();
function deleteDB(name){
indexedDB.deleteDatabase(name);
数据存储：
indexedDB中没有表的概念，而是objectStore，一个数据库中可以包含多个objectStore，objectStore是一个灵活的数据结构，可以存放多种类型数据。也就是说一个objectStore相当于一张表，里面存储的每条数据和一个键相关联。
我们可以使用每条记录中的某个指定字段作为键值（keyPath），也可以使用自动生成的递增数字作为键值（keyGenerator），也可以不指定。选择键的类型不同，objectStore可以存储的数据结构也有差异。　
这个就有点复杂了。看这里的教程：1./dolphinX/p/3415761.html　
2./dolphinX/p/3416889.html
详细API地址：/developerworks/cn/web/wa-indexeddb/#ibm-pcon
暂时就这样，确实有些存储方式未亲身用过，也只能找些别人的资料了。先了解个大概，以后用到再详细记录吧！^_^
版权所有 爱编程 (C) Copyright 2012. . All Rights Reserved.
闽ICP备号-3
微信扫一扫关注爱编程，每天为您推送一篇经典技术文章。前端 _本地存储问题
前端 _本地存储问题
发布时间： 18:06:20
编辑：www.fx114.net
本篇文章主要介绍了"前端 _本地存储问题"，主要涉及到前端 _本地存储问题方面的内容，对于前端 _本地存储问题感兴趣的同学可以参考一下。
我问了许多的前端，使用Cookie会有什么弊端，很多都是回答说不安全之类的，不安全那是肯定的，不过只要服务端在使用Cookie的时候适当的加个密就可以防止很多安全的问题了，这不是我们前端主要关心的问题。在日常的开发过程中，本人碰到了以下问题：
1. 存储大小问题
2. 在请求过程中会带过去服务端，这样如果Cookie过大会影响发包。
首先我们看看第一点，一些权威机构对Cookie存放大小是怎么说的
一个域名的每个 cookie 被限制为 4,096 字节。这个总数可以 4 千字节 (KB) 的一个名称-值对的形式存在，或作为多达 20 名称-值对的总的 4 KB。如果计算机没有足够的空间存储该 cookie，该 cookie 将被丢弃。
就是说单个值不得超过4K, 可以多达20个。这样的存储量基本是够用了，不过对于服务器端如果也使用的话就很难说了，因为这里就不单单是前端要用了，还多了一方，这样的数据是不可靠的，你永远无法知道是不是你自己把他给堵满了，或者把你的改了。对于团队开发，使用时有这个必要看看cookie使用的情况。
另外还有一点就是，如果你用一些如Firebug的调试软件抓一下头部你会发现，在网站发送请求（Post）的时候会把cookie也带了过去。这样一看，如果你单cookie有1KB 共有 5 个就 5 KB, &按1M的小水管来算，上传最大就只有50K/S, 就上传就花了 0.1 秒，等服务端返回加处理这样一个过程花的时间就长了许多。对于大访问量的站就更不用说了，一个用户单一个请求上传就花了5KB, 1024个用户就 5M，1024W就是5M*10000，这是多么大的上传宽带开销。
针对以上这两个问题本人觉得可以用以下的解决方案.
支持 localstorage 的浏览器使用&localstorage , 这个本地存储的对象ie8以上的都支持了，Firefox 、Chrome就更不用说了。
对于一些低级一点的浏览器如IE6 IE7 可以用Flash的SharedObject模拟一个本地存储的对象。
这提到的这两个东西都是服务器端不会用到的，所以也不用担心数据被服务端的人给改了。
可以对localstorage &和 Flash的存储进行一个封装，让它使用方便点就可以了。具体怎么样去实现这里就不多说了，提供一些参考资料吧。
http://blog.csdn.net/ld_flex/article/details/6002774
/xiaowei0705/archive//2021372.html
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
本文标题：
本页链接：以下试题来自：
问答题简答题OMC中提供的备份方式主要有哪几种，请简述各种方法的特点及其主要应用场景。
1、系统管理数据库表集操作：为数据全备份，在恢复时，会把原来的配置数据全部删除掉。但只删除用户下的表，不删除用户......
为您推荐的考试题库
您可能感兴趣的试卷
你可能感兴趣的试题
1.问答题 1、修改相关内核参数；2、上传并解压Oracle安装包；3、安装Oracle主程序；4、安装Oracle补丁程序；5......2.问答题
1）从系统来看：降低小区间干扰
2）从用户来看：补偿路径损耗和阴影衰落，适应信道变化
3.问答题 1）无线承载控制RBC2）无线接纳控制RAC3）连接移动性控制CMC4）动态资源分配DRA5）小区间干扰协调IC......4.问答题 1）检测PSCH，获取5ms时钟，并获得小区ID2）检测SSCH，获得10ms时钟，小区ID组、BCH天线配置3）检测下行参考信号......5.问答题 第一步：在下行的专用信令中分配随机接入的Preamble。第二步：在上行RACH上发送随机接入的Preamble。第三步：在D......}