浏览器存储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: 保存的数据长期存在,下一次访问该网站的时候,网页可以直接 ...
随机推荐
- php单引号双引号的区别
单引号里面的内容是直接被当做一个字符串,用双引号定义的字符串的内容最只要的特征就是会被解析.
- JavaWeb 没用
Servlet的生命周期 初始化:Web容器加载servlet,调用innit(),只执行一次 处理业务: 请求到达时,运行service方法 并调用相应的doget或者dopost方法. 可执行多 ...
- 关于const指针的误解
转自 http://blog.csdn.net/yingxunren/article/details/3968800 const char*, char const*, char*const的区别问题 ...
- 前端学习笔记2017.6.21-引入JS文件的方法
通过网络引入JS文件 <script src="https://www.xxx.com/aaa.js"></script> 如果是引入本地JS文件 < ...
- 如何把VS2015中本地的一个项目建立远程的Git Repository
在项目开发中,我在本地自己电脑上用VS2015建立了一个项目,比如项目名字叫做Luke.Test 那么,接下来,我如何把这个项目签入到远程的Git Repository里去呢. 方法如下 先进入远程R ...
- Web Api 测试工具
1.调用POST方法:使用Chrome流量器的PostMan工具. 前端模拟发送数据/调试的好工具:Chrome下的Postman-REST Client 下载地址 https://chrome.go ...
- CENTOS 7 升级安装 Python 3.5
写在前面的话 本文采取源码的方式安装 Python 3.5.2,如果是其它版本会有或多或少的差异,且写这篇的时候官网最新的是 Python 3.7,个人使用 3.5 就足够了,没必要更新到最新,否则出 ...
- 与HDFS交互- By web界面
开启方式 linux系统 eg :ubuntu 浏览器 eg:firefox HDFS的web管理界面地址:localhost:50070/ 具体理解有待后续学习....
- datetime问题
DateUtil.format(DateTime.now(), DatePattern.NORM_DATE_PATTERN);. 此方法将现在时间转为yy--mm--dd格式 mysql中日期运算 ...
- [SinGuLaRiTy] 高一下半期测试
[SinGuLaRiTy-1017] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. 对于所有的题目: Time Limit: 1s | Me ...