浏览器存储localStorage、sessionStorage、cookie
localStorage和sessionStorage浏览器支持IE8+(测试IE8不行);
localStorage:用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除
sessionStorage:用于临时保存同一窗口(或标签的数据),在关闭窗口或标签页之后将会删除这些数据
localStorage和sessionStorage可使用的API都是相同的:
1、保存数据:localStorage.setItem(key,value);
localStorage.setItem("clickcount","1");
localStorage.clickcount = Number(localStorage.clickcount)+1;//将字符串转换为数字
2、读取数据:localStorage.getItem(key);
alert(localStorage.getItem("clickcount"))
3、删除单个数据:localStorage.removeItem(key);
4、删除所有数据:localStorage.clear();
5、得到某个索引的key:localStorage.key(index);
键/值对通常以字符串存储,可以按需求转换格式
cookie
创建cookie:document.cookie = "userId = 12138";
在cookie 的名或值中不能使用分号(;)、逗号(,)、等号(=)以及空格。在cookie的名中做到这点很容易,但要保存的值是不确定的。如何来存储这些值呢?方 法是用 escape()函数进行编码,它能将一些特殊符号使用十六进制表示,例如空格将会编码为“20%”,从而可以存储于cookie值中,而且使用此 种方案还可以避免中文乱码的出现。例如:
document.cookie="str="+escape("I love ajax");
当使用escape()编码后,在取出值以后需要使用unescape()进行解码才能得到原来的cookie值
设置cookie的过期时间(以 UTC 或 GMT 时间):document.cookie = "userId = 12138; expires=Thu, 18 Dec 2013 12:00:00 GMT";
读取cookie:var x = document.cookie;
document.cookie 将以字符串的方式返回所有的 cookie,类型格式: cookie1=value; cookie2=value; cookie3=value;
修改cookie:document.cookie = "userId = 18; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
删除coolie,只需要设置expires为以前的时间即可:document.cookie = "userId = 12138; expires=Thu, 18 Dec 2013 12:00:00 GMT";
cookie是存于用户硬盘的一个文件,这个文件通常对应一个域名,当浏览器再次访问这个域名时,便使这个cookie可用,因此,cookie可用跨越一个域名下的多个网页,不能跨域名使用
cookie可以保存用户的登录状态、跟踪用户的行为(网页城市的切换)、定制页面(网页皮肤切换)、创建购物车
cookie的确定主要集中在安全性和隐私保护
1、cookie可能被用户禁用
2、cookie和浏览器相关,使用不同的浏览器访问同一个页面,不同浏览器保存的cookie不能互相访问
3、cookie可能被删除,因为cookie是存储在用户硬盘的一个文件,很有可能被用户删除
4、cookie都是以纯文本的形式记录于文件中,因此要保存用户的敏感信息时最好先加密
浏览器存储localStorage、sessionStorage、cookie的更多相关文章
- 本地存储 localStorage/sessionStorage/cookie
cookie是个基础的东西.是服务器发送到客户端,存储在客户端的一小段数据.可以存储一些配置信息,客户标识信息等.用户下次访问这个网站时,会把上次网站发来的cookie一同发送回去.cookie保存在 ...
- 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题
移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...
- 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用
cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...
- localStorage sessionStorage cookie indexedDB
目录: localStorage sessionStorage cookie indexedDB localStorage localStorage存储的数据能在跨浏览器会话保留 数据可以长期保留,关 ...
- 深入了解浏览器存储:对比Cookie、LocalStorage、sessionStorage与IndexedDB
摘要: 对比Cookie.LocalStorage.sessionStorage与IndexedDB 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 随着移动网络的发展与演化,我 ...
- 客户端 localStorage, sessionStorage, cookie 的区别
SessionStorage, LocalStorage, Cookie这三者都可以被用来在浏览器端存储数据,而且都是字符串类型的键值对! 区别在于前两者属于WebStorage,创建它们的目的便是存 ...
- localstorage sessionstorage cookie的区别
一.基本概念 Cookie cookie比较小,大小限制在4kb左右,是网景公司的前雇员 LouMontulli 在1993年3月的发明.它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记 ...
- 原生JavaScript常用本地浏览器存储方法二(cookie)
JavsScript Cookie概述 cookie是浏览器提供的一种机制,它将document对象的cookie属性提供给JavaScript.可以由JavaScript对其进行控制,而并不是Jav ...
- localstorage sessionstorage cookie 备忘
/* sessionStorage: 保存的数据用于浏览器的一次会话,当会话结束(通常是该窗口关闭),数据被清空: localStorage: 保存的数据长期存在,下一次访问该网站的时候,网页可以直接 ...
随机推荐
- Python程序设计3——字典
1 字典 字典是Python唯一内建的映射类型.字典是键值对的集合. 1.1 字典的使用 某些情况下字典更加好用,比如一个电话列表.注意:电话号码只能用字符串数字表示,否则会出问题.因为电话号码一旦以 ...
- C++笔记--指针数组和结构
指针 类型为T*的变量能保存一个类型T对象的地址 Char c=‘a’:Char * p=& c://保存了c的地址 指针的操作一般都是间接的引用,就是相当于引用指针所指的对象. 0是一个特殊 ...
- WPF开源界面库
WPF开源项目 WPF有很多优秀的开源项目,我以为大家都知道,结果,问了很多人,其实他们不知道.唉,太可惜了! 先介绍两个比较牛逼的界面库 1.MaterialDesignInXamlToolkit ...
- C# 写 LeetCode easy #14 Longest Common Prefix
14.Longest Common Prefix Write a function to find the longest common prefix string amongst an array ...
- 动态绑数据(Repeater控件HeaderTemplate和ItemTemplate)
前几天,Insus.NET有写了<动态绑数据(GridView控件Header和ItemTemplate)>http://www.cnblogs.com/insus/p/3303192.h ...
- vue使用过程常见的一些问题
Vue目前的的开发模式主要有两种:1.直接页面级的开发,script直接引入Vue2.工程性开发,webpack+loader或者直接使用脚手架工具Vue-cli,里面的文件都配置好了 webpack ...
- 【bzoj1853】: [Scoi2010]幸运数字 数论-容斥原理
[bzoj1853]: [Scoi2010]幸运数字 预处理出所有幸运数字然后容斥原理 但是幸运数字是2logn个数的 直接搞会炸 所以把成倍数的处理掉 然后发现还是会T 所以数字要从大到小处理会快很 ...
- 接口和抽象类有什么区别(Java基础)
接口可以多实现 Java中抽象类只能单继承 接口 相对于类来说 可以实现多个接口 抽象相对于 类来说 只能单一继承 一个类只能继承一个抽象类,但可以实现多个接口. 抽象类中可以包含抽象方法和 ...
- Java泛型<>内各种参数的异同
先说下本篇随笔主要涉及到的东西(参考Java编程思想一书): 1.说明 List<Fruit> 与 List<Apple> 之间为什么是非继承关系. 2.由 1 引出的问题说明 ...
- window下 mysql密码忘记
1.打开MySQL配置文件 my.ini中,添加上skip-grant-tables,可以添加到文件的末尾或者是这添加到[mysqld]的下面. 2.重启mysql 3.这时登录MySQL不再需要验证 ...