关闭

sessionStorage,localStorage,cookie

191人阅读 评论(0) 收藏 举报

共同点:都是保存在浏览器端,且同源的。区别:cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。


Web Storage: 实现客户端本地的存储,客服cookie的一些限制,数据量更大。

两种存储类型:
     1.sessionStorage: 存储特定于某个服务器会话的数据,在浏览器关闭之后,数据消失。因此本地运行的文件是不可用的。
     2.localStorage: 数据保存在客户端本地的硬件设备中,一直存在。

相关API:

        1.     length: 返回当前storage中的数目。
        2.     key(n):返回第n个条目
        3.      getItem(key):根据指定的key值获取对应的value值
        4.      setItem(key,value):设置指定key值的内容为value
        5.      removeItem(key);根据指定的key值,键值为key的内容
        6.      clear():删除所有值。firefox中没有实现。



限制:大多数浏览器会对同一个来源的数据存在大小的限制,大部分限制5MB,但是也有一部分限制2.5MB 

例子:实现一个简单的留言板功能,利用localStorage存储,并显示在页面上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web storage</title>
    <script>
        function saveStorage(id)
        {
            var data = document.getElementById(id).value;
            var time = new Date().getTime();//获取时间戳作为key值
            localStorage.setItem(time,data);//添加一条留言
            alert("提交成功");
            loadStorage("msg");
        }
        function clearStorage(){//清除所有的内容
            localStorage.clear();
            alert("已全部清除");
            loadStorage("msg");
        }
        function loadStorage(id){
            var result = '<table border="1px">';
            for(var i =0;i<localStorage.length;i++){
                var key = localStorage.key(i);
                var value = localStorage.getItem(key);//根据key值 获取对应的留言
                var date = new Date();
                date.setTime(key);
                var datestr = date.toGMTString();
                result+='<tr><td>'+value+'</td><td>' + datestr + '</td></tr>';
            }
            result +='</table>';
            document.getElementById(id).innerHTML = result;
        }
    </script>
</head>
<body>
<header >留言板</header>
<form>
    <textarea id="message" cols="150" rows="30"></textarea><br>
    <input type="button" value="提交" onclick="saveStorage('message')">
    <input type="button" value="清除" onclick="clearStorage()">
</form>
<p id="msg"></p>
</body>
</html>

0
0
查看评论

Cookie、session和localStorage、以及sessionStorage之间的区别

一、Cookie、session和localStorage的区别 cookie的内容主要包括:名字、值、过期时间、路径和域。路径与域一起构成cookie的作用范围。若不设置时间,则表示这个cookie的生命期为浏览器会话期间,关闭浏览器窗口,cookie就会消失。这种生命期为浏览器会话期的...
  • ruby_xc
  • ruby_xc
  • 2017-03-25 19:34
  • 4071

cookie、 sessionStorage 、localStorage之间的区别和使用

1.cookie:存储在用户本地终端上的数据。有时也用cookies,指某些网站为了辨别用户身份,进行session跟踪而存储在本地终端上的数据,通常经过加密。一般应用最典型的案列就是判断注册用户是否已经登过该网站。 2.HTML5 提供了两种在客户端存储数据的新方法:(http://www....
  • zgrkaka
  • zgrkaka
  • 2017-01-22 11:36
  • 2777

浅谈cookie、sessionStorage 和 localStorage

cookie和session都是用来跟踪浏览器用户身份的会话方式。 cookie与session的区别:cookie数据保存在客户端,session数据保存在服务器端。 如果web服务器端使用的是session,那么所有的数据都保存在服务器上,客户端每次请求服务器的时候会发送当前会话的session...
  • zhouziyu2011
  • zhouziyu2011
  • 2017-02-28 13:25
  • 1204

HTML5本地存储:SessionStorage, LocalStorage, Cookie

SessionStorage, LocalStorage, Cookie这三者都可以被用来在浏览器端存储数据,而且都是字符串类型的键值对!。 区别在于前两者属于WebStorage,创建它们的目的便是存储客户端数据。 而Cookie早在网景公司的浏览器中就开始支持,最初目的是为了保持HTTP的状态。...
  • yangjvn
  • yangjvn
  • 2015-09-04 12:33
  • 3004

SessionStorage LocalStorage cookie三者区别

sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据。有了本地数据,就可以避免数据在浏览器和服务器间不必要地来回传递。 sessionStorage、localStorage、cookie都是在浏览器端存...
  • JJ1105805281
  • JJ1105805281
  • 2015-12-30 16:42
  • 5646

sessionStorage 、localStorage 和 cookie 之间的区别

sessionStorage 和 localStorage(又称为DOM Storage) 是HTML5 WebStorage API 提供的,可以方便的在web请求之间保存数据。有了本地数据,就可以避免数据在浏览器和服务器间不必要地来回传递。 共同点:都是保存在浏览器端,且...
  • zhuhai__yizhi
  • zhuhai__yizhi
  • 2015-05-14 16:58
  • 689

本地存储Cookie、localStorage、sessionStorage

cookie、localStorage、sessionStorage都是存储在用户本地终端上的数据,一般会经过加密处理(例如base64编码)。通常将一些用户个人数据,例如用户名等存储在本地,既方便了用户的使用,也利于多个页面间传递数据时不用通过多次的请求服务器。cookiecookie采用”键=值...
  • xiaoermingn
  • xiaoermingn
  • 2016-11-15 21:51
  • 917

HTML5 本地存储(localStorage)、会话存储(sessionStorage)和 Cookie 的区分

本地存储(localStorage):长时间的保存在电脑本地,不同页面之间都能互相读取本地存储的数据。 会话存储(sessionStorage):只限于当前页面,当前页面关闭,数据就清除了。 注意:不管是 localStorage 还是 sessionStorage ,存储的都是...
  • huangpb123
  • huangpb123
  • 2016-10-09 09:52
  • 1677

对cookie、localStorage、sessionStorage的理解

1、cookie 在客户端记录信息确定用户身份。由于HTTP是一种无状态的协议,服务器单从网络连接上无从知道客户身份。就给客户端们颁发一个通行证,每人一个,无论谁访问都必须携带自己通行证。这样服务器就能从通行证上确认客户身份了。这就是Cookie的工作原理。 客户端发送一个http请求到...
  • u014303724
  • u014303724
  • 2016-03-07 17:09
  • 2471

cookies和localStorage和sessionStorage的区别

1.cookies和localStorage和sessionStorage的区别首先总的来说,三者都是用于持久化数据存储的手段,都是存储在浏览器端,且同源(协议,端口号,都域名相同) localStorage和sessionStorage都是Web存储,大小5M左右,完全存储在客户端,它们是因为本地...
  • codezha
  • codezha
  • 2017-09-08 15:01
  • 312
    个人资料
    • 访问:40535次
    • 积分:784
    • 等级:
    • 排名:千里之外
    • 原创:22篇
    • 转载:46篇
    • 译文:9篇
    • 评论:2条
    文章分类
    最新评论