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. Python沙盒环境配置

    一.简介 本文介绍配置python沙盒环境的方法步骤. 二.安装步骤 1.安装pyenv http://www.cnblogs.com/274914765qq/p/4948530.html 2.安装v ...

  2. 715B Complete The Graph

    传送门 题目大意 给出一个图,一些边带权,另一些边等待你赋权(最小赋为1).请你找到一种赋权方式,使得 s 到 t 的最短路为 L n ≤ 1e3 ,m ≤ 1e4 ,L ≤ 1e9 分析 二分所有边 ...

  3. 51NOD1835 完全图

    传送门 分析 令f(i,j)表示i点完全图有j个联通块的方案数. 讨论有i-1个点已经固定了,我们拉出一个代表元素然后讨论它的集合大小然后组合数算一下就可以了. $$ dp(i,j) = \sum_{ ...

  4. niginx隐藏入口文件index.php

    location / { if (!-e $request_filename) { rewrite ^/(.*)$ /index.php/$ last; break; } }

  5. 第四章输入/输出(I/O)4.2PCL中I/O模块及类介绍

    PCL中I/O库提供了点云文件输入输出相关的操作类,并封装了OpenNI兼容的设备源数据获取接口,可直接从众多感知设备获取点云图像等数据.I/O模块利用21个类和28个函数实现了对点云的获取.读入.存 ...

  6. Python程序设计2——列表和元组

    数据结构:更好的说法是从数据角度来说,结构化数据,就是说数据并不是随便摆放的,而是有一定结构的,这种特别的结构会带来某些算法上的性能优势,比如排序.查找等. 在Python中,最基本的数据结构是序列( ...

  7. Python--socket和threading编程

    网络编程基础(一) TCP/IP协议 OSI/RM协议 特点:独立于计算机硬件和操作系统,统一分配网络地址,提供可靠服务,隔离了物理网络的硬件差异 协议分层(百度):网络接口层:IEE802.3(以太 ...

  8. springcloud 通过后端去下载和预览文件,要重设跨域允许

    @RequestMapping("/download") public void downloadNet(String uri, boolean isOnLine, HttpSer ...

  9. Winform 数据库连接配置界面

    一.添加引用       C:\Program Files\Microsoft Visual Studio 8\Common7\IDE\Microsoft.Data.ConnectionUI.Dial ...

  10. The King’s Problem 强连通

    题意  有n个城市 m条有向边 将n个城市分成几个州 1.强连通必定在一个州里 2.州里的任意两个城市  u,v     满足u到v 或者v到u  其一即可 先缩点  然后求最小路就覆盖 #inclu ...