《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. dubbo介绍以及创建

    1.什么是dubbo? DUBBO是一个分布式服务框架(关于框架,其实就是配置文件加java代码),致力于提供高性能和透明化的RPC远程服务调用方案,是阿里巴巴SOA服务化治理方案的核心框架,每天为2 ...

  2. DOM学习控件定位和案例

    Dom中有多种定位属性,下面是一个简单案例 <html><!--制作一个会跟着鼠标走的图像,还有控件定位的案例--> <head> <title>doc ...

  3. BAT script to set local account password never expire

    BAT script wmic UserAccount where Name="account123" set PasswordExpires=False

  4. Spring 学习笔记 整合 Struts2

           Struts2与Spring整合后,可以使用Spring的配置文件applicationContext.xml来描述依赖关系,在Struts2的配置文件struts.xml来使用Spri ...

  5. 数学：BSGS

    先来稍微回顾一下,我们已经会求模线性方程(包括其特殊情况乘法逆元) 我们还会进行幂取模的快速算法(模是质数用费马小定理,模一般情况用欧拉定理) 对于幂中指数特别大的情况,我们还延伸出了拓展欧拉定理来解 ...

  6. vijos 1071 01背包+输出路径

    描述 过年的时候,大人们最喜欢的活动,就是打牌了.xiaomengxian不会打牌,只好坐在一边看着. 这天,正当一群人打牌打得起劲的时候,突然有人喊道:“这副牌少了几张!”众人一数,果然是少了.于是 ...

  7. 【BZOJ1975】【SDOI2010】魔法猪学院 [A*搜索]

    魔法猪学院 Time Limit: 10 Sec  Memory Limit: 64 MB[Submit][Status][Discuss] Description iPig在假期来到了传说中的魔法猪 ...

  8. UIPageControl---iOS-Apple苹果官方文档翻译

    本系列所有开发文档翻译链接地址:iOS7开发-Apple苹果iPhone开发Xcode官方文档翻译PDF下载地址 //转载请注明出处--本文永久链接:http://www.cnblogs.com/Ch ...

  9. Quick-Cocos2dx-Community_3.6.3_Release 编译时libtiff.lib 无法解析

    Quick-Cocos2dx-Community_3.6.3_Release 使用VS2012编译,报错: libtiff.lib lnk2001 无法解析的外部符号 ltod3 类似于上面这种,刚才 ...

  10. 【洛谷 T47488】 D:希望 （点分治）

    题目链接 看到这种找树链的题目肯定是想到点分治的. 我码了一下午,\(debug\)一晚上,终于做到只有两个点TLE了. 我的是不完美做法 加上特判\(A\)了这题qwq 记录每个字母在母串中出现的所 ...