JavaScript -- 数据存储
Cookie
Web应用程序是使用HTTP协议传输数据的。HTTP协议是无状态的协议。
一旦数据交换完毕,客户端与服务器端的连接就会关闭,再次交换数据需要建立新的连接。这就意味着服务器无法从连接上跟踪会话。
即用户A购买了一件商品放入购物车内,当再次购买商品时服务器已经无法判断该购买行为是属于用户A的会话还是用户B的会话了。要跟踪该会话,必须引入一种机制。
Cookie就是这样的一种机制。它可以弥补HTTP协议无状态的不足。在Session出现之前,基本上所有的网站都采用Cookie来跟踪会话。
所以Cookie会随HTTP请求在服务器与客户端之间来回传递。
Cookie 是一些数据, 存储于你电脑上的文本文件中。
Cookie 以名/值对形式存储,如下所示:
name=adoctors
使用 JavaScript 创建Cookie
document.cookie="name=adoctors";
还可以为 cookie 添加一个过期时间(以 UTC 或 GMT 时间)。默认情况下,cookie 在浏览器关闭时删除:
document.cookie="name=adoctors; expires=Thu, 18 Dec 2018 12:00:00 GMT";
使用 JavaScript 读取 Cookie
var x = document.cookie;
使用 JavaScript 修改 Cookie
在 JavaScript 中,修改 cookie 类似于创建 cookie,旧的 cookie 将被覆盖。
使用 JavaScript 删除 Cookie
删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可
document.cookie = "name=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
为了使用方便,将方法封装如下:
function setCookie(name,val,day){
var time=new Date();
time.setTime(time.getTime()+day*24*60*60*1000);
document.cookie=name+"="+val+";expires="+time.toGMTString();
}
function getCookie(name){
var arr=document.cookie.split(";");
for(var i=0;i<arr.length;i++){
arr[i]=arr[i].replace(/^\s*|\s*$/,"");
if(arr[i].indexOf(name+"=")==0){
return arr[i].substring(name.length+1)
}
}
}
function clearAllCookie(){
var str=document.cookie.match(/[^=;]+(?==)/g);
for(var i=0;i<str.length;i++){
str[i]=str[i].replace(/^\s*|\s*$/,"");
document.cookie=str[i]+"=0;expires=Wed Jan 04 2000 15:45:56 GMT"
}
}
Cookie的缺点主要集中于安全性于隐私保护,主要包括一下几点:
- Cookie可能被用户禁用
- 同一个页面被不同浏览器访问时,浏览器之间保存的Cookie是不能互相访问的
- 每个Cookie都是存在客户端硬盘上的文件,可能被删除
- Cookie安全性不够高,所有Cookie都是以纯文本的形式记录于文件中
sessionStorage & localStorage
localStorage
用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。
sessionStorage
用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。
不管是 localStorage,还是 sessionStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):
保存数据:localStorage.setItem(key,value);
读取数据:localStorage.getItem(key);
删除单个数据:localStorage.removeItem(key);
删除所有数据:localStorage.clear();
得到某个索引的key:localStorage.key(index);
如:
sessionStorage.setItem('bindingType','wechat');
sessionStorage.getItem('topicRes')
localStorage.setItem('province', JSON.stringify(res.data.data));
localStorage.getItem("province")
与Cookie相比的优势
- 不需要安装额外的插件
- 存储空间高达5MB(Cookie只有4kb)
- 操作简单
注意:任何格式存储是会自动被转换为字符串,所以读取时注意格式转换。
JavaScript -- 数据存储的更多相关文章
- 关于javascript数据存储机制的一个案例。
之前在学习js的结合性的时候,我有点不太明白,在网上找到一个比较经典的C语言优先级结合性的案例,就是下边这一个.本想在js之中测试一番,结果竟然发现得出的结果和网上的不一样,这令我百思不得其解,后经高 ...
- JavaScript数据存储和深浅拷贝实际运用
JavaScript分两种数据类型.1.简单数据类型有:number, string, boolean, undefined和null当声明一个简单数据类型的变量时,在内存中会把数据存在栈里.2.复杂 ...
- 【前端学习笔记05】JavaScript数据存储Cookie相关方法封装
//Cookie设置 //设置新cookie function setCookie(name,value,duration){ var date = new Date(); date.setTime( ...
- JavaScript高级编程———数据存储(cookie、WebStorage)
JavaScript高级编程———数据存储(cookie.WebStorage) <script> /*Cookie 读写删 CookieUtil.get()方法根据cookie的名称获取 ...
- JavaScript笔记01——数据存储(包括.js文件的引用)
While, generally speaking, HTML is for content and CSS is for presentation, JavaScript is for intera ...
- 数据存储 --《高性能JavaScript》
1.数据存储的方式 1.字面量 2.变量 3.数组项 4.对象成员 2.各自的性能特点 1.访问字面量和局部变量的速度最快,访问数组项和对象成员相对较慢 2.由于局部变量在作用域链的起始位置,因此访问 ...
- Javascript本地存储小结
前言 总括:详细讲述Cookie,LocalStorge,SesstionStorge的区别和用法. 人生如画,岁月如歌. 原文博客地址:Javascript本地存储小结 知乎专栏&& ...
- ActionScript 3.0入门:Hello World、文件读写、数据存储(SharedObject)、与JS互调
近期项目中可能要用到Flash存取数据,并与JS互调,所以就看了一下ActionScript 3.0,现把学习结果分享一下,希望对新手有帮助. 目录 ActionScript 3.0简介 Hello ...
- 15个JavaScript本地存储技术的函数库和工具
当构建更复杂的JavaScript应用程序运行在用户的浏览器是非常有用的,它可以在浏览器中存储信息,这样的信息可以被共享在不同的页面,浏览会话. 在最近的过去,这将有可能只被cookies文本文件保存 ...
随机推荐
- 用一句SQL取出第 m 条到第 n 条记录的方法
1 --从Table 表中取出第 m 条到第 n 条的记录:(Not In 版本)2 3 SELECT TOP n-m+1 * 4 FROM Table 5 WHERE (id NOT IN (SEL ...
- 洛谷p3369 treap
这是一个treap裸题,还可以用splay,替罪羊树,线段树等等写 treap是树和堆结合,可以方便的在O(log(n))期望时间内进行以下操作,因此treap又叫做名次树 插入x数 删除x数(若有多 ...
- (转)JSP九大内置对象
原文出处:http://www.importnew.com/19128.html 虽然现在基本上使用SpringMVC+AJAX进行开发了Java Web了,但是还是很有必要了解一下JSP的九大内置对 ...
- hdu-5651 xiaoxin juju needs help(数学+gcd约分求阶乘)
题目链接: xiaoxin juju needs help Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K ...
- codeforces 598C C. Nearest vectors(极角排序)
题目链接: C. Nearest vectors time limit per test 2 seconds memory limit per test 256 megabytes input sta ...
- User-Agent 及其构造
url = ... user_agent = ... headers = {'User-Agent' : user_agent} req = requests.request(url=url, hea ...
- 【遍历二叉树】02二叉树的中序遍历【Binary Tree Inorder Traversal】
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 给定一个二叉树,返回他的中序遍历的 ...
- freeMarker(十一)——模板语言之指令
学习笔记,选自freeMarker中文文档,译自 Email: ddekany at users.sourceforge.net 1.assign 概要 <#assign name1=value ...
- mysql编码
Mysql中文乱码问题完美解决方案 修改查看MYSQL字符集(charset) MySQL 乱码之我见 10分钟学会理解和解决MySQL乱码问题 /etc/mysql/my.cnf /etc/init ...
- ONTAK2010 Peaks加强版
给一个图,每个点有点权,$q$ 次询问从 $x$ 开始只走点权小于等于 $y$ 的路径能到的点中第 $k$ 大的点权,无解输出 -1 强制在线 请注意因为这个 sb 博主为了描述方便,这里的题目描述用 ...