虽然cookie , localstorge , sessionstorge三者都有存储的功能,但是还是有区别,

git上地址:https://github.com/lily1010/cookie-storge

我个人的总结如下:

一 Cookie问题

①Cookie是什么

Cookie 是一小段文本信息，伴随着用户请求和页面在 Web 服务器和浏览器之间传递。用户每次访问站点时，Web 应用程序都可以读取 Cookie 包含的信息,简单描述Cookie就像是访问服务器时服务器颁发给用户的“身份证”，下次访问的时候带回这身份证，服务器就能识别信息。

②Cookie特点

--如果不为Cookie设置它的生存周期的话，默认是关闭浏览器的时候就销毁Cookie。

--Cookie默认情况下是不允许出现中文字符的，如果我们要添加具有中文内容的Cookie时，我们需要使用java.net.URLEncoder先对中文进行编码，随后在进行Cookie的添加。读取Cookie时，需要使用java.net.URLDecoder对其进行解码。

--不同的浏览器对Cookie的存储都有一些限制，通常是Cookie数量和Cookie总大小的限制。像火狐对Cookie的限制是每个域名只能有50个Cookie值，总大小不能超过4097个字。

--Cookie在HTTP的头部，如果Cookie的量非常大，要做Cookie做压缩，压缩方法是将Cookie的多个K/V看作是普通的文本，做文本压缩。Cookie的规范中规定，Cookie仅能保存ASCII码为34~126的可见字符。

③Cookie缺点

--每次都跟随用户请求发送给服务器,浪费带宽。

--只能存固定长度的字符

--存不了复杂的数据,比如对象

--cookie还需要指定作用域，不可以跨域调用

--cookie需要前端开发者自己封装setCookie，getCookie方法

二 html5中 sessionstorge和localstorge问题

html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。为了更大容量存储和复杂数据而设计的除此之外，它俩有setItem,getItem,removeItem,clear等方法

①sessionStorage是什么?

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

②localStorage是什么?

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

③它们的数据处理方法

// 保存数据到sessionStorage

sessionStorage.setItem('key', 'value');

// 从sessionStorage获取数据

var data = sessionStorage.getItem('key');

// 清空sessionStorage选定数据

var data = sessionStorage.removeItem("key");

// 清空sessionStorage所有数据

var data = sessionStorage.clear();

三 storage事件

先来看看storage事件的文档说明

The storage event is fired when a storage area changes, as described in the previous two sections (for session storage, for local storage).

When this happens, the user agent must queue a task to fire an event with the name storage, which does not bubble and is not cancelable, and which uses the StorageEvent interface, at each Window object whose Document 
object has a Storage object that is affected.

翻译过来,当存储的storage数据发生变化时都会触发它，但是它不同于click类的事件会冒泡和能取消，同时最后这句才是重点，storage改变的时候，触发这个事件会调用所有同域下其他窗口的storage事件，不过它本身触发storage即当前窗口是不会触发这个事件的

下面来看我的文件目录:

其中test1.html内容是:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    </head>

    <body>

        <input type="text" placeholder="请输入">

        <button>保存数据</button>

        <script type="text/javascript">

        // 保存数据到sessionStorage

        //sessionStorage.setItem('key', 'value');

        // 从sessionStorage获取数据

        //var data = sessionStorage.getItem('key');

        // 清空sessionStorage选定数据

        //var data = sessionStorage.removeItem("key");

        // 清空sessionStorage所有数据

        //var data = sessionStorage.clear();

            var val = document.getElementsByTagName("input")[0];

        var btn = document.getElementsByTagName("button")[0];

        btn.onclick = function(){

          var value = val.value;

          if(!value) return;

          localStorage.setItem("key", val.value);

        };

            if(window.addEventListener){

                window.addEventListener("storage",handle_storage,false);

            }else if(window.attachEvent){

                window.attachEvent("onstorage",handle_storage);

            }

            function handle_storage(e){

                console.log(e);

            document.write("oldValue: "+ e.oldValue + " newValue:" + e.newValue)

            }

        </script>

    </body>

</html>

其中test2.html内容是:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

    </head>

    <body>

        <script type="text/javascript">

            if(window.addEventListener){

                window.addEventListener("storage",handle_storage,false);

            }else if(window.attachEvent){

                window.attachEvent("onstorage",handle_storage);

            }

            function handle_storage(e){

                console.log(e);

            document.write("oldValue: "+ e.oldValue + " newValue:" + e.newValue)

            }

        </script>

    </body>

</html>

经过测试得出结论:(ps：前提页面test1.html和test2.html在同域下，并都是打开状态不同窗口)

页面test1.html下，有个input框用来存储store，它自身绑定了storage事件，这个时候写入新的数据点击保存，这时新的sotre数据保存了，但是页面test1.html的storage事件没触发，而页面test2.html下，绑定的storage事件则触发了.

问题①:既然改变的是同域下的其他页面数据,那么storage事件应用在那里?

答:多窗口间多通信用到它就是最好选择了，比如某块公用内容区域基础数据部分都是从store中提取的，这个区域中大多数页面中都有，当用户打开多个页面时，在其中一个页面做了数据修改，那其他页面同步更新是不是很方便（当前页面就要用其他方式处理了），当然用于窗口间通信它作用不仅仅如此，更多的大家可以利用它特性去发挥。

问题②:storage的events对象的常用属性有哪些?

oldValue：更新前的值。如果该键为新增加，则这个属性为null。

newValue：更新后的值。如果该键被删除，则这个属性为null。

url：原始触发storage事件的那个网页的网址。

key：存储store的key名；

cookie VS sessionstorge VS localstorge的更多相关文章

  1. Light项目---vue搭建前端时遇见的一些问题

    css样式中设置的: opacity 表示透明度 将js对象存储到localStorge中 的时候,直接存储是不行的,会变成[object Object],都是这样的数据, 需要将其进行JSON化处理 ...

  2. chrome工具调试

    项目调试的困境 程序开发总会遇到各种各样的问题,为什么实际结果和预期结果不一致? 这个时候如果能深入程序内部抽丝剥茧去一探究竟再好不过! 而chrome工具是前端开发的杀手锏,经常听到的一句话是: 出 ...

  3. cookie和localstorge、sessionStorge的区别

    一.背景由来 cookie原来是用来网络请求携带用户信息的,只不过在HTML5出现之前,前端没有本地存储的方法,只能使用cookie代替 localstorge.sessionStorge是html5 ...

  4. cookie，localstorge，sessionstorge三者总结

    相同点:都是客户端存储东西的: 不同: 1大小,cookie最小;locastorge最大 2 cookie设置好会在header头里面自动带的:但是ls和ss不会:ls同个浏览下不同网页(非跨域)都 ...

  5. Cookie、LocalStorge、SesstionStorge 的区别和用法

    前言 总括:详细讲述Cookie.LocalStorge.SesstionStorge的区别和用法. 1. 各种存储方案的简单对比 Cookies:浏览器均支持,容量为4KB UserData:仅IE ...

  6. web前端 3大储存 Cookie、localStorge、sessionStorage

    Cookie: //setCookie function setCookie(name,value){ var Days = 30; var exp = new Date(); exp.setTime ...

  7. jquery.cookie用法详细解析，封装的操作cookie的库有jquery.cookie.js

    jquery.cookie用法详细解析 需要注意存入cookie前,对数据进行序列化, 得到后在反序列化: 熟练运用:JSON.stringify();和JSON.parse(): 通常分为如下几个步 ...

  8. localstroge与cookie的区别

    HTML5本地存储是一种让网页可以把键值对存储在用户浏览器客户端的方法.像Cookie一样,这些数据不会因为你打开新网站,刷新页面,乃至关闭你的浏览器而消失. 而与Cookie不同的时,这些数据不会每 ...

  9. 网页 cookie

    定义: 从JavaScript的角度看,cookie 就是一些字符串信息.这些信息存放在客户端的计算机中,用于客户端计算机与服务器之间传递信息. 使用:document.cookie = 'usern ...

随机推荐

  1. "从客户端中检测到有潜在危险的 Request.Form 值"的解决方案汇总

    #事故现场 在一个asp.net 的项目中,前端通过ajax将富文本中的文字内容post到服务端的一个ashx中,在ashx中尝试读取参数值时, 结果报错:“从客户端中检测到有潜在危险的 Reques ...

  2. 轻量级Web渗透测试工具jSQL

    轻量级Web渗透测试工具jSQL jSQL是Kali集成的一款轻量级的Web渗透测试工具.最初该工具主要实施SQL注入,后来增加更多的功能,扩展形成一个综合性的Web渗透测试工具.Kali提供的版本较 ...

  3. loj #110. 乘法逆元

    #110. 乘法逆元 内存限制:256 MiB时间限制:1000 ms标准输入输出 题目类型:传统评测方式:文本比较 上传者: 匿名 提交提交记录统计讨论测试数据   题目描述 这是一道模板题. 给定 ...

  4. openlayer3 加载geoserver发布的WFS服务

    转自原文 openlayer3加载geoserver发布的WFS服务 openlayers3调用GeoServer发布的wfs 1 参考一 1.1 问题 openlayer3加载WFS存在跨域问题,需 ...

  5. 为什么HierachyViewer无法连接真机调试

    关于什么是Hierarchy Viewer,请查看官方文档:http://developer.android.com/tools/debugging/debugging-ui.html.个人理解:Hi ...

  6. phonegap工程中修改app的名字

    针对phonegap比较高的版本,我的是6.4.0. 在phonegap工程中,当添加了iOS和android平台或多个平台后,工程进行了开发,然后觉得app的名字想修改一下(比如在手机上显示的app ...

  7. vue 避免渲染时闪烁

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  8. gulp是用来干什么的？（概念）

    当我们在使用gulp的时候,gulp到底用来干什么呢? 编译 sass 合并优化压缩 css 校验压缩 js 优化图片 添加文件指纹(md5) 组件化头部底部(include html) 实时自动刷新 ...

  9. C# 利用ICSharpCode.SharpZipLib实现在线加密压缩和解密解压缩 C# 文件压缩加解密

    C# 利用ICSharpCode.SharpZipLib实现在线加密压缩和解密解压缩   这里我们选用ICSharpCode.SharpZipLib这个类库来实现我们的需求. 下载地址:http:// ...

  10. javascript 高级编程系列 - 创建对象

    1. 工厂模式 function createPerson(name, age) { var obj = {}; obj.name = name; obj.age = age; obj.getName ...