关闭

sessionStorage,localStorage,cookie

157人阅读 评论(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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:31324次
    • 积分:669
    • 等级:
    • 排名:千里之外
    • 原创:21篇
    • 转载:45篇
    • 译文:9篇
    • 评论:1条
    文章分类
    最新评论