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的更多相关文章

  1. 本地存储 localStorage/sessionStorage/cookie

    cookie是个基础的东西.是服务器发送到客户端,存储在客户端的一小段数据.可以存储一些配置信息,客户标识信息等.用户下次访问这个网站时,会把上次网站发来的cookie一同发送回去.cookie保存在 ...

  2. 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题

    移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...

  3. 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用

    cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...

  4. localStorage sessionStorage cookie indexedDB

    目录: localStorage sessionStorage cookie indexedDB localStorage localStorage存储的数据能在跨浏览器会话保留 数据可以长期保留,关 ...

  5. 深入了解浏览器存储:对比Cookie、LocalStorage、sessionStorage与IndexedDB

    摘要: 对比Cookie.LocalStorage.sessionStorage与IndexedDB 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 随着移动网络的发展与演化,我 ...

  6. 客户端 localStorage, sessionStorage, cookie 的区别

    SessionStorage, LocalStorage, Cookie这三者都可以被用来在浏览器端存储数据,而且都是字符串类型的键值对! 区别在于前两者属于WebStorage,创建它们的目的便是存 ...

  7. localstorage sessionstorage cookie的区别

    一.基本概念 Cookie cookie比较小,大小限制在4kb左右,是网景公司的前雇员 LouMontulli 在1993年3月的发明.它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记 ...

  8. 原生JavaScript常用本地浏览器存储方法二(cookie)

    JavsScript Cookie概述 cookie是浏览器提供的一种机制,它将document对象的cookie属性提供给JavaScript.可以由JavaScript对其进行控制,而并不是Jav ...

  9. localstorage sessionstorage cookie 备忘

    /* sessionStorage: 保存的数据用于浏览器的一次会话,当会话结束(通常是该窗口关闭),数据被清空: localStorage: 保存的数据长期存在,下一次访问该网站的时候,网页可以直接 ...

随机推荐

  1. android sdk更新源

    什么是Android SDK: SDK:(software development kit)软件开发工具包.被软件开发工程师用于为特定的软件包.软件框架.硬件平台.操作系统等建立应用软件的开发工具的集 ...

  2. 算法Sedgewick第四版-第1章基础-2.1Elementary Sortss-007归并排序(自下而上)

    一. 1. 2. 3. 二.代码 package algorithms.mergesort22; import algorithms.util.StdIn; import algorithms.uti ...

  3. 85D Sum of Medians

    传送门 题目 In one well-known algorithm of finding the k-th order statistics we should divide all element ...

  4. Django rest framework之序列化小结

       最近在DRF的序列化上踩过了不少坑,特此结合官方文档记录下,方便日后查阅. [01]前言    serializers是什么?官网是这样的”Serializers allow complex d ...

  5. discuz_ucenter_api_for_java的中文问题

    我踩过的坑,希望你别掉进来. 云服务需要和UCENTER做对接,一个php,一个Java,幸好有了discuz_ucenter_api_for_java,帮我解决了大部分问题,为什么是大部分问题,因为 ...

  6. python部分运算符理解

    1.//取整除 5//3得到1 2.%取余 5%3得到2 3.<<左移 2<<2得到8 2用二进制表示为10,向左移两位得到1000,即十进制的8 4.>>右移 1 ...

  7. WebGoat系列实验Buffer Overflows & Code Quality & Concurrency

    WebGoat系列实验Buffer Overflows & Code Quality & Concurrency Off-by-One Overflows 实验需要访问OWASP Ho ...

  8. Spring-访问静态资源文件的方法

    转自:  http://blog.163.com/zhangmihuo_2007/blog/static/27011075201453044959574?suggestedreading 如果你的Di ...

  9. [译]Javascript的弱点

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...

  10. [raspberry pi3] 安装ffmpeg

    买了个pi3,pi相对于通常的嵌入式系统的最大好处是里面夹带了gcc编译器,有很多东西都不需要交叉编译了. arm和pc的性能还是不能比的,io的瓶颈还是很明显的, 想要编的快点还是要在pc上交叉编译 ...