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. php单引号双引号的区别

    单引号里面的内容是直接被当做一个字符串,用双引号定义的字符串的内容最只要的特征就是会被解析.

  2. JavaWeb 没用

    Servlet的生命周期 初始化:Web容器加载servlet,调用innit(),只执行一次 处理业务: 请求到达时,运行service方法 并调用相应的doget或者dopost方法.  可执行多 ...

  3. 关于const指针的误解

    转自 http://blog.csdn.net/yingxunren/article/details/3968800 const char*, char const*, char*const的区别问题 ...

  4. 前端学习笔记2017.6.21-引入JS文件的方法

    通过网络引入JS文件 <script src="https://www.xxx.com/aaa.js"></script> 如果是引入本地JS文件 < ...

  5. 如何把VS2015中本地的一个项目建立远程的Git Repository

    在项目开发中,我在本地自己电脑上用VS2015建立了一个项目,比如项目名字叫做Luke.Test 那么,接下来,我如何把这个项目签入到远程的Git Repository里去呢. 方法如下 先进入远程R ...

  6. Web Api 测试工具

    1.调用POST方法:使用Chrome流量器的PostMan工具. 前端模拟发送数据/调试的好工具:Chrome下的Postman-REST Client 下载地址 https://chrome.go ...

  7. CENTOS 7 升级安装 Python 3.5

    写在前面的话 本文采取源码的方式安装 Python 3.5.2,如果是其它版本会有或多或少的差异,且写这篇的时候官网最新的是 Python 3.7,个人使用 3.5 就足够了,没必要更新到最新,否则出 ...

  8. 与HDFS交互- By web界面

    开启方式 linux系统 eg :ubuntu 浏览器 eg:firefox HDFS的web管理界面地址:localhost:50070/ 具体理解有待后续学习....

  9. datetime问题

    DateUtil.format(DateTime.now(), DatePattern.NORM_DATE_PATTERN);. 此方法将现在时间转为yy--mm--dd格式   mysql中日期运算 ...

  10. [SinGuLaRiTy] 高一下半期测试

    [SinGuLaRiTy-1017] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. 对于所有的题目: Time Limit: 1s | Me ...