JavaScript中本地存储数据常用的,且兼容性较好的有两种方式,cookie和Storage。另外还可以使用location.hash临时存储少量关键信息。

一    location.hash

  location.hash可以记录当前页面的状态,保存或分享当前页的url,再次打开该url时,网页还是保存(分享)时的状态。

如果要使用location.hash来存储状态数据,那么我们首先应该了解URL的大小限制。

虽然HTTP协议的RFC规范并没有详细规定URL的最大字符长度限制,但实际上,在浏览器或者服务器中总会存在限制的。这里的字符是指ASCII字符。

一般建议浏览器URL最大值:IE 2KB,Chrome 8KB,Firefox 64KB,Safari 72KB,Opera 192KB,注意这只是浏览器端的限制,实际使用还要根据不同的服务器端来做调整,例如apache 一般限制最大为8KB,nginx一般默认4KB等等。两者结合来看,我建议在开发中尽量把大小控制在2KB以内。

 location.hash的主要目的并不是为了存储数据,它更重要的功能是可以无刷新修改页面,配合ajax技术实现前端路由,虽然现在使用H5的history API逐渐替代了这种方式,但我们还是可以了解一下它的原理,因为它的兼容性更好。

  本篇主要讲解JS的数据存储,关于前端路由这里不会详细讲解。

二    document.cookie

1,cookie用于在客户端本地临时保存用户少量信息。

当用户打开一个网址时,浏览器可以把与该网址相关的少量用户信息存储在cookie中,当下一次用户再次打开相同网址时,浏览器会自动把cookie中存储的信息一起发送给服务器,这样服务器就能及时的返回和用户相关的信息。浏览器允许的cookie最大为4KB,不同浏览器同一域名下允许的cookie个数在20到50之间。

  

  2,读取cookie

  读取cookie会返回一个字符串,它以键值对的形式保存数据,每条数据用分号隔开。

  注意:只能在使用http或者https协议访问网页时才能正确读写cookie,本地使用file协议无法使用cookie。

 console.log(document.cookie);//"username=ren;age=12"

  另外,每条cookie都有几个可选的键,用来设置/更新它自己,但在cookie中不能被显式的查看到

path:规定cookie的路径,如果没有设置默认为当前文档的目录。

domain:设置域名,如果没有则默认为当前页面域名。

max-age:以秒来规定cookie的生存周期。可以设置负值使cookie过期。

expires:设置一个时间当做cookie的过期时间。基本可以用max-age替代。

secure:通过设置一个boolean值来规定通过http还是https传输cookie,新的规定是cookie只能通过https传输,所以这个键基本没用了。

  

  3,添加cookie

要添加新的cookie信息很简单,但是这种方式只支持一条一条的写入:

 document.cookie = "address=cd;max-age=360;path=/";

  cookie和普通变量不同,普通变量经过上面的操作,原来的值将被覆盖,而cookie则执行了类似 cookie += “some text”的操作。

  

  4,修改cookie

 document.cookie = "address=sc;max-age=360;path=/”;

  修改时path必须和创建时一致,不然浏览器会新增一条cookie数据。

  

  5,删除cookie

如果要在cookie生存周期内手动的删除cookie,只需要把expires设置为以前的某一个时间或把max-age设置为负值即可:

 document.cookie = “address=sc;expires=Thu,01 Jan 1970 00:00:00 GMT;path=/”;
document.cookie = "name=ren;max-age=-1;path=/";

  需要注意的是,路径必须和创建这条cookie的路径一致,不然浏览器不会执行删除操作。

  下面是我封装的一个以对象形式返回cookie的函数:

 function getCookie(cookie){
if(!cookie){
return null;
}else{
var cookieArr = cookie.split(";");
var cookieObj = {};
for(let i = 0,len = cookieArr.length;i < len;i++){
cookieArr[i] = cookieArr[i].trim();
var cookieKey = cookieArr[i].split("=")[0];
var cookieVal = cookieArr[i].split("=")[1];
cookieObj[cookieKey] = cookieVal;
}
return cookieObj;
}
}

三    Storage

  Storage分为window.localStorage和window.sessionStorage。

  

  1,异同

  localStorage是没有时间限制的(除非用户手动清理)数据存储,存储在本地硬盘。而sessionStorage是针对一个 session(会话)的数据存储,网页关闭,数据将丢失,他们存储数据的大小可达5MB。不同浏览器可能存在差异。

  

  2,length

  localStorage对象有一个length属性,表示存储了几条数据。

  

  3,添加和修改数据

localStorage是一个对象,所以他的修改方法同普通对象:

 localStorage.name = "ren";//普通对象方式
localStorage.setItem("age",12);//localtStorage提供的方法
console.log(localStorage.name);//"ren"
console.log(localStorage.getItem(age));//"12"

  你可能会奇怪,localstorage.age为什么会返回字符串“12”,那是因为它只支持String类型的数据存储,所以系统在存储时会自动把数据转换成字符串。

  

  4,删除

删除一项

 localStorage.removeItem(age);
console.log(localStorage);//{name:age,length:1}

删除全部

 localStorage.clear();
console.log(localStorage);//{length:0}

BOM之本地数据存储的更多相关文章

  1. Android本地数据存储复习

    Android本地数据存储复习 Android无论是应用层还是系统层都需要在本地保存一些数据,尤其在应用层中使用的就更为普遍,大体有这么几种:SharedPreference,file,sqlite数 ...

  2. iOS开发——数据持久化&使用NSUserDefaults来进行本地数据存储

    使用NSUserDefaults来进行本地数据存储   NSUserDefaults适合存储轻量级的本地客户端数据,比如记住密码功能,要保存一个系统的用户名.密码.使用NSUserDefaults是首 ...

  3. iOS APP之本地数据存储(译)

    最近工作中完成了项目的用户信息本地存储,查阅了一些本地存储加密方法等相关资料.期间发现了一个来自印度理工学院(IIT)的信息安全工程师的个人博客,写了大量有关iOS Application secur ...

  4. Windows 8 应用开发 - 本地数据存储

    原文:Windows 8 应用开发 - 本地数据存储      在应用中通常会遇到用户主动或被动存储信息的情况,当应用关闭后这些数据仍然会存储在本地设备上,用户下次重新激活应用时会自动加载这些数据.下 ...

  5. iOS开发技术分享(1)— iOS本地数据存储

    iOS开发技术分享(1)— iOS本地数据存储 前言: 我本是一名asp.net程序员,后来加入了iOS游戏开发队伍,到现在也有一年多的时间了.这一年来,每天都干到2.3点钟才睡觉,不为别的,只为了学 ...

  6. 浏览器本地数据存储解决方案以及cookie的坑

    本地数据存储解决方案以及cookie的坑 问题: cookie过长导致页面打开失败 背景: 在公司的项目中有一个需求是打开多个工单即在同一个页面中打开了多个tab(iframe),但是需要在刷新时只刷 ...

  7. Android之ListView,AsyncTask,GridView,CardView,本地数据存储,SQLite数据库

    版权声明:未经博主允许不得转载 补充 补充上一节,使用ListView是用来显示列表项的,使用ListView需要两个xml文件,一个是列表布局,一个是单个列表项的布局.如我们要在要显示系统所有app ...

  8. cocos2d-html5开发之本地数据存储

    做游戏时常常须要的一个功能呢就是数据的保存了,比方游戏最高分.得到的金币数.物品的数量等等.cocos2d-html5使用了html5.所以html5的数据保存方法是对引擎可用的: html5本地数据 ...

  9. 本地数据存储解决方案以及cookie的坑

    本地数据存储解决方案以及cookie的坑 问题: cookie过长导致页面打开失败 背景: 在公司的项目中有一个需求是打开多个工单即在同一个页面中打开了多个tab(iframe),但是需要在刷新时只刷 ...

随机推荐

  1. 剖析nsq消息队列(一) 简介及去中心化实现原理

    分布式消息队列nsq,简单易用,去中心化的设计使nsq更健壮,nsq充分利用了go语言的goroutine和channel来实现的消息处理,代码量也不大,读不了多久就没了.后期的文章我会把nsq的源码 ...

  2. Leetcode之深度优先搜索(DFS)专题-1123. 最深叶节点的最近公共祖先(Lowest Common Ancestor of Deepest Leaves)

    Leetcode之深度优先搜索(DFS)专题-1123. 最深叶节点的最近公共祖先(Lowest Common Ancestor of Deepest Leaves) 深度优先搜索的解题详细介绍,点击 ...

  3. Jedis操作Redis--Set类型

    /** * Set(集合) * SADD,SCARD,SDIFF,SDIFFSTORE,SINTER,SINTERSTORE,SISMEMBER,SMEMBERS,SMOVE,SPOP,SRANDME ...

  4. NLP(十六) DL在NLP中的应用

    深度学习中的核心主题是卷积神经网络(CNN)和循环神经网络(RNN) 卷积神经网络 CNN用于图像处理 卷积: 原始图像 5×5 滤波器 3×3 滤波器以步长大于小于1,到处平移,并与原始图像里的3× ...

  5. HDU-3549Flow Problem 最大流模板题

    传送门 这里是Ford-Fulkerson写的最大流模板 #include <iostream> #include <cstdio> #include <algorith ...

  6. Codeforces 832 D Misha, Grisha and Underground

    Misha, Grisha and Underground 题意:Misha 和 Grisha 是2个很喜欢恶作剧的孩子, 每天早上 Misha 会从地铁站 s 通过最短的路到达地铁站 f, 并且在每 ...

  7. lightoj 1036 - A Refining Company(简单dp)

    题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1036 题解:设dp[i][j]表示处理到(i,j)点时的最大值然后转移显然是 ...

  8. hdu4565 So Easy!(矩阵快速幂)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4565 题解:(a+√b)^n=xn+yn*√b,(a-√b)^n=xn-yn*√b, (a+√b)^n ...

  9. Atcoder D - XOR Replace(思维)

    题目链接:http://agc016.contest.atcoder.jp/tasks/agc016_d 题解:稍微想一下就知道除了第一次的x是所有的异或值,之后的x都是原先被替换掉的a[i]所以要想 ...

  10. codeforces 233 D. Table(思维+dp )

    题目链接:http://codeforces.com/contest/233/problem/D 题意:问在n*m的矩阵中满足在每一个n*n的矩阵里画k个点,一共有几种画法. 题解:其实这题挺简单的但 ...