《1》
  1.document对象提供了的cookie
  2.Window对象提供了sessionStorage和localStorage两个存储对象来对网页的数据进行添加、删除、修改、查询操作。
  console.log(typeof(Storage) !== "undefined") //检测浏览器是否支持Storage存储
 
《2》三种数据存储方式,分别是:
  1.cookie
    a.主流浏览器都支持
    b.存储于访问者的计算机中的变量;
    c.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie
    d.注意测试需要在浏览器中服务请求才起作用,直接浏览器打开静态文件不起作用
  2.sessionStorage
    《IE8以上》 《会话存储》 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据
  3.localStorage
    《IE8以上》 《本地存储》 用于《长久保存整个网站》的数据,保存的数据《没有过期时间》,直到手动去除
 
《3》简单例子理解
  1.cookie
    设置cookie的形式:"cookieName1=cookie1^cookieName2=cookie2;expires=" + date
    cookie有一个关键字是expires,它是用来设置cookie的有效期的,默认情况(不设置expires)是当浏览器关闭的时候,自动清除cookie。
    注意设置多个cookie不要用“;”隔开,用 “^” 如上
    删除cookie
      把cookie的expires设置到过去(1970年1月1号) cookie就过期了
 
    修改cookie
      如document.cookie = "password=123;expires=" + date.toGMTString();
      再次请求遇到已经定义过的cookie(username),浏览器会自己修改原来储存的值;如果没有定义过,浏览器则会创建一个新的cookie。
    

<html>
<head>
<script type="text/javascript">
//检查是否已设置 cookie
function getCookie(c_name){
//document.cookie 对象存有某些 cookie
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
//检查指定的 cookie 是否已储存
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
} //创建一个可在 cookie 变量中存储访问者姓名的函数(cookie 的名称、值以及过期天数)
function setCookie(c_name,value,expiredays){
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name + "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
} //如果 cookie 已设置,则显示欢迎词,否则显示提示框来要求用户输入名字。
function checkCookie()
{
username=getCookie('username')
if (username!=null && username!=""){
alert('Welcome again '+username+'!')
}else {
username=prompt('Please enter your name:',"")
if (username!=null && username!=""){
setCookie('username',username,365)
}
}
}
</script> </head>
<body onLoad="checkCookie()">
</body>
</html>
 
  2.sessionStorage 和 localStorage
    对象属性:
      length : 返回存储对象中包含多少条数据。
 
    对象方法:
      key(n)   返回存储对象中第 n 个键的名称
      getItem(keyname)     返回指定键的值
      setItem(keyname, value)  添加键和值,如果对应的值存在,则更新该键对应的值。
      removeItem(keyname)  移除键
      clear()  清除存储对象中所有的键
      例子:
        localStorage.setItem("a",JSON.stringify({name:"xusanduo",token:"abcd123"}));
        var local = localStorage.getItem("a");
        console.log(JSON.parse(local))
        sessionStorage.setItem("session","sessionXusanduo")
        console.log(sessionStorage)
 
 
《4》联系与区别:
  相同点:都保存在浏览器端,同源的
  不同点:
    1.传递方式不同
      cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。
 
      sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。
    2.数据大小不同
      cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。
      存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。
 
      sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
    3.数据有效期不同
      cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
      sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;
      localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;
 
    4.作用域不同
      cookie也是在所有同源窗口中都是共享的。
      sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;
      localStorage 在所有同源窗口中都是共享的;
 
      Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。
      Web Storage 的 api 接口使用更方便。

javaScript存储的更多相关文章

  1. 详解javascript 存储

    javascript用于存储的方式可谓是多种多样,善于应用‘存储’可以大大的提高网站的性能,博主结合日常开发常见需求做一下总结,希望对大家有用- 1.cookie 存储大小:   4kb左右,以20个 ...

  2. Javascript兑现图片预加载【回调函数,多张图片】 (转载)

    Javascript实现图片预加载[回调函数,多张图片] 使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多 ...

  3. 浅析JavaScript之数组

    一  概述 JavaScript数组同后端语言一样,具有它自己的数据结构,归根结底,这种数据结构,本质就是一种集合. 在后端语言中(如java,.net等),数组是这样定义的:数组是用来存储相同数据类 ...

  4. 本地存储localStorage以及它的封装接口store.js的使用

    本地存储localStorage以及它的封装接口store.js的使用 sublime-text chrome javascript readyGo 2016年11月20日发布   0 推荐 9 收藏 ...

  5. 读书笔记(javascript 高级程序设计)

    一. 数据类型: 1. undefined: 未声明和未初始化的变量,typeof 操作符返回的结果都是 undefined:(建议未初始化的变量进行显式赋值,这样当 typeof 返回 undefi ...

  6. javascript中把一个数组的内容全部赋值给另外一个数组

    如:var a = [1,2,3,4];var b= [];b = a;这个不是把值赋值过去而是b作为a的引用,b改变的是a如何b指向的是一个新数组,a把元素值全部赋值过去? 1.普通数组可以使用   ...

  7. JavaScript new 操作符 OOP(一)

    什么是对象    对象是单个实物的抽象,通常需要一个模板,表示某一类实物的共同特征,然后对象根据这个模板生成. 对象是一个容器,封装了属性(property)和方法(method),属性是对象的状态, ...

  8. javaScript 深层复制

    在工作中遇到了深浅复制的问题,所以详细总结一下: 深复制和浅复制只针对像 Object, Array 这样的复杂对象的.简单来说,浅复制只复制一层对象的属性,而深复制则递归复制了所有层级. var o ...

  9. 利用 V8 深入理解 JavaScript 设计

    JavaScript 代码运行 以大家开发常用的 chrome 浏览器或 Node 举例,我们的 JavaScript 代码是通过 V8 运行的.但 V8 是怎么执行代码的呢?当我们输入 const ...

随机推荐

  1. MongoDB基操

    基本概念 database 数据库 包含多个collection collection 集合 包含多个文档document(类JSON对象) document 文档 一个文档对象中包含多个key-va ...

  2. [dhcpd]清除dhcp缓存

    修改了dhcp的default-lease-time && max-lease-time 清除缓存: rm /var/lib/dhcpd.leases~ echo "&quo ...

  3. RotateAnimation 详解

    RotateAnimation 详解 看看新闻网>看引擎>开源产品 其他构造器的旋转也可参考这副图. RotateAnimation旋转坐标系为以旋转点为坐标系(0,0)点.x轴为0度,顺 ...

  4. AngularJs学习——常用表单指令练习

    一.知识点 ng-show.ng-hide.ng-if(控制元素显示隐藏,区别在于ng-hide是是否显示隐藏元素,而ng-if是是否移除元素): ng-src.ng-class(为元素添加路径和cl ...

  5. MySql 利用函数 查询所有子节点

    前提:mysql  函数  find_in_set(str,strlist), cast(value as type)   一.find_in_set(str,strlist):如果字符串str是在的 ...

  6. zoj 2006 Glass Beads

    Glass Beadshttp://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1006 Time Limit: 2 Seconds     ...

  7. [洛谷P2597] [ZJOI2012]灾难

    洛谷题目链接:[ZJOI2012]灾难 题目描述 阿米巴是小强的好朋友. 阿米巴和小强在草原上捉蚂蚱.小强突然想,如果蚂蚱被他们捉灭绝了,那么吃蚂蚱的小鸟就会饿死,而捕食小鸟的猛禽也会跟着灭绝,从而引 ...

  8. 计数排序Counting sort

    注意与基数排序区分,这是两个不同的排序 计数排序的过程类似小学选班干部的过程,如某某人10票,作者9票,那某某人是班长,作者是副班长 大体分两部分,第一部分是拉选票和投票,第二部分是根据你的票数入桶 ...

  9. python测试rabbitmq简易实例

    生产者 import pika #coding=utf8 credentials = pika.PlainCredentials('guest', '密码') connection = pika.Bl ...

  10. 【BZOJ1085】【SCOI2005】骑士精神 [A*搜索]

    骑士精神 Time Limit: 10 Sec  Memory Limit: 162 MB[Submit][Status][Discuss] Description 在一个5×5的棋盘上有12个白色的 ...