《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. 使用Spring Animation的API创建动画

    pring Animation 是一种特殊的动画曲线,自从 iOS 7 开始被广泛应用在系统动画中. Spring Animation 是Linear(线性即匀速)动画.Ease-out(即动画减速地 ...

  2. HDU 4771 (DFS+BFS)

    Problem Description Harry Potter has some precious. For example, his invisible robe, his wand and hi ...

  3. jdbcType和javaType

    MyBatis 通过包含的jdbcType类型 BIT FLOAT CHAR TIMESTAMP OTHER UNDEFINED TINYINT REAL VARCHAR BINARY BLOB NV ...

  4. stout代码分析之二：None类

    stout库中为了避免使用NULL带来的风险,统一用None表示空. None类的实现方式如下: struct None {}; 奇怪的是, Nothing类实现方式与None一模一样..让人怀疑作者 ...

  5. bzoj 1221 [HNOI2001] 软件开发 费用流

    [HNOI2001] 软件开发 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1938  Solved: 1118[Submit][Status][D ...

  6. notify()与notifyAll()

    notify() :随机唤醒一个线程. notifyAll():唤醒等待某个锁的所有任务. 在技术上,可能会有多个任务在所创建的任务上处于wait()状态,调用notifyAll()比只调用notif ...

  7. [Leetcode] LRU 算法实现

    Design and implement a data structure for Least Recently Used (LRU) cache. It should support the fol ...

  8. 数据结构：二维ST表

    POJ2019 我们其实是很有必要把ST算法拓展到二维的,因为二维的RMQ问题还是不少的 int N,B,K; ]; int val[maxn][maxn]; ][]; ][]; 这里的N是方阵的长宽 ...

  9. LightOJ 1319 - Monkey Tradition CRT除数互质版

    本题亦是非常裸的CRT. CRT的余数方程 那么定义 则 其中 为模mi的逆元. /** @Date : 2016-10-23-15.11 * @Author : Lweleth (SoungEarl ...

  10. iOS 点击cell上的按钮获取行数

    -(void)btnClick:(UIButton *)button{ UITableViewCell *cell = (UITableViewCell *)[[button superview] s ...