Web - 客户端存储的几种方式
客户端存储主要方便一些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.lengthreturn 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 errorsreader.onprogress = updateProgress;reader.onload = loaded;reader.onerror = errorHandler; }function updateProgress(evt) {if (evt.lengthComputable) {// evt.loaded and evt.total are ProgressEvent propertiesvar 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 dumpif(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 参考
- https://developer.mozilla.org/zh-CN/docs/Web/Guide/API/DOM/Storage/Storage
- https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
- https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm
- https://developer.mozilla.org/en-US/docs/Web/API/FileReader
- http://www.w3.org/TR/FileAPI/
- http://www.w3.org/TR/file-writer-api/
Web - 客户端存储的几种方式相关推荐
- linux数据同步技术比较,linux下实现web数据同步的四种方式(性能比较)教程.docx
linux下实现web数据同步的四种方式(性能比较)教程 实现web数据同步的四种方式=======================================1.nfs实现web数据共享2.rs ...
- linux下实现web数据同步的四种方式(性能比较)
实现web数据同步的四种方式 ======================================= 1.nfs实现web数据共享 2.rsync +inotify实现web数据同步 3.rs ...
- web服务器攻击的八种方式
随着互联网的高速发展,网络走进了千家万户,同时也有很大一部分人架设起了自己的网站.继而不安分的黑客们,又将目光对准了服务器攻击这个方式,从而破坏或取得服务器的管理权限.本文将主要讲述针对web服务器攻 ...
- 实现web数据同步的四种方式
实现web数据同步的四种方式 ======================================= 1.nfs实现web数据共享 2.rsync +inotify实现web数据同步 3.rs ...
- WEB通信交互的几种方式
WEB通信交互的几种方式 - 实时通信发展过程简介 简单介绍一下现在的WEB通信有以下几种方式:最基本的http请求方式,Ajax轮询,Ajax长轮询,HTML5推送事件,HTML5的WebSocke ...
- PageRank、图计算、图存储的两种方式
目录 PageRank 什么是PageRank? 算法原理 入链 ====投票 入链数量 入链质量 网络上各个页面的连接图 计算过程 初始值 迭代递归计算(收敛) 图存储的两种方式 代码实现 Page ...
- 提高Web Service效率的几种方式(转)
2008-02-20 16:01 基于SOAP的Web Service的性能一直为人诟病,由于采用 XML标准进行系统间的数据传输,加大了传输的数据量,尤其是在传输一些具有比较严格结构的数据时,会使得 ...
- 浏览器本地存储的四种方式
浏览器的本地存储主要分为Cookie.WebStorage和IndexedDB,其中WebStorage又分为localStorage(本地存储)和sessionStorage(会话存储),下面我们一 ...
- web数据存储的4种方法
概述 在说数据存储之前,我们先弄明白为啥要做存储,数据存储目的是为了减少网络资源的开销,提高客户端的性能和体验.通常利用存储来做一些登录信息的存储,静态资源的展示.客户端实现数据存储的方式也是多种多样 ...
最新文章
- 用朴素贝叶斯模型预测柯南中被害人和凶手!
- HibernateTemplate
- 【408】C函数中的ADT
- OSPF LSA序列号问题
- 组合模式的安全模式与透明模式
- python中为什么没有自增或者自减
- ext4 关闭延迟分配
- 惊慌 Android!使用 3D 打印的头像可破解多款手机
- L2-012 关于堆的判断(模拟堆+字符串处理)
- 《调试软件》作者主页
- 【感悟】放开那条大腿,让我来!
- mysql数据库管理与开发pdf_深入浅出mysql数据库开发、优化与管理维护.pdf
- 打算开源一个低代码平台,第四天,包含【工作流,业务流,财务,APQC】。技术栈 React,typescript,java,mysql
- 使用python调用浏览器实现自动转发微博
- 用DISM为Windows 7 SP1 2019官方英文版添加中文语言包及XHCI驱动
- Efficient Low-rank Multimodal Fusion with Modality-Specific Factors 论文
- 基于微信小程序的实验室管理系统 文档+云开发项目源码及云数据库+部署说明
- ps3本服务器维修,ps3端ftp服务器
- 【华为OD机试真题 JAVA】竖直四子棋
- WAI-ARIA无障碍网页应用 HTML5 设计辅助功能
热门文章
- (016)java后台开发之Eclipse安装反编译插件
- (0042) iOS 开发之iOS10.3新特性:如何动态更换APP图标
- 使用Tensoflow实现梯度下降算法的一次线性拟合
- 在linux下查询日志
- SpringMVC学习(二)——SpringMVC架构及组件(及其运行原理)
- 136 Single Number(找唯一数Medium)
- FMDatabase常见的几个操作
- SQLServer2008或SQLServer2008 R2没有智能提示解决方法
- 浅析arm的异常、中断和arm工作模式的联系
- 在Ruby中获取system()调用的输出