admin管理员组

文章数量:1530017

参考链接：

浏览器三种存储方式之间的区别

为什么要进行数据存储

随着Web应用程序的出现，慢慢的也开始产生了对于能够直接在客户端上存储用户信息能力的要求，我们知道当我们访问某个页面的时候，很多东西都需要从服务器端进行加载，如果这个时候能将一些东西存储在客户端的话，是不是就可以直接拿来用啦，方便快捷，速度又快，又可以节省了很多不必要的请求，为什么不用呢？

当某条广告更新的时候右上角出现小红点，用户点击过后就不出现小红点，直到广告更新的时候小红点再出现，这个功能当时我就用到了客户端数据存储来实现啦，其实像一些登录信息，偏好设定都可以存储在客户端，而首先进行客户端存储的方案就是cookie，而今天，cookie只是在客户端存储数据的其中一种方式。

三个存储方式

1.Cookie 在浏览器请求中 每次都会附加请求头发送给服务器；

2.localStorage 保存数据会一直保存，没有过期时间；

3.sessionStorage 仅当前页面有效，一旦关闭就会被释放；

什么是Cookie ?

Cookie 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:

  • 当用户访问 web 页面时，他的名字可以记录在 cookie 中。

  • 在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

  • 其实cookie有两个主要功能，第一个功能就是用于解决http无状态的缺点，在客户端存储会话信息，记录用户的状态，而第二个功能也就是我们现在也经常使用cookie在客户端存储一些其它的数据

cookie的构成：

　　一般来说，cookie是由浏览器保存的以下几块信息构成的
  
　　（1）名称：一个唯一确定cookie的名称
  
　　（2）值：存储在cookie中的字符串值，值必须被URL编码
  
　　（3）域：cookie对于哪个域是有效的，所有向该域发送的请求都会包含这个cookie信息
  
　　（4）路径：对于指定域中的路径，应该向服务器发送cookie
  
　　（5）失效时间：表示cookie何时应该被删除的时间戳
  
　　（6）安全标志：指定后，cookie只有在使用SSL连接的时候才发送到服务器

  • Cookie 实例

[](javascript:void(0)😉

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>cookie</title>
</head>
<head>
<script>
//设置cookie值的函数function setCookie(cname,cvalue,exdays){
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}// 获取cookie值的函数
function getCookie(cname){
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
    }
    return "";
}// 检测cookie值的函数
function checkCookie(){
    var user=getCookie("username");
    if (user!=""){
        alert("欢迎 " + user + " 再次访问");
    }
    else {
        user = prompt("请输入你的名字:","");
          if (user!="" && user!=null){
            setCookie("username",user,30);
        }
    }
}
</script>
</head>
    
<body onload="checkCookie()"></body>
    
</html>

cookie的缺点

虽然cookie可以存储一些数据，但是仍然存储下面一些缺点

（1）cookie需要在客户端和服务器端之间来回传送，会浪费不必要的资源

（2）cookie的存储大小有限制，对于每个域，一般只能设置20个cookie，每个cookie大小不能超过4KB

（3）cookie的安全性，cookie因为保存在客户端中，其中包含的任何数据都可以被他人访问，cookie安全性比较低

Web存储机制

接下来，html5中的存储，主要是sessionStorage和localStrorage

什么是Web存储

Web Storage也是一种在客户端存储数据的一种机制，主要的目的是为了克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无须将数据在客户端和服务器之间来回的进行传送，并且可以存储大量的跨会话的数据

一般来说，Web Storage包含了两种对象的定义，sessionStorage和globalStorage，而现在localStorage在修订过的html5规范中作为持久保存客户端数据的方案取代了globalStorage，接下来，让我们看一下它们有什么区别啦

什么是localStorage 和 sessionStorage？

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。

localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。

localStorage 属性是只读的。

提示: 如果你只想将数据保存在当前会话中，可以使用 sessionStorage 属性， 该数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

保存数据语法：

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

读取数据语法：

var lastname = localStorage.getItem("key");

删除数据语法：

localStorage.removeItem("key");

localStorage实例

[](javascript:void(0)😉

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>localStorage</title>
<script>
function clickCounter() {
    if(typeof(Storage) !== "undefined") {
        if (localStorage.clickcount) {
            localStorage.clickcount = Number(localStorage.clickcount)+1;
        } else {
            localStorage.clickcount = 1;
        }
        document.getElementById("result").innerHTML = "你在按钮上已经点击了 " + localStorage.clickcount + " 次。";
    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
    }
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">点我!</button></p>
<div id="result"></div>
<p>点击按钮查看数字会自动增加。</p>
<p>关闭浏览器，重新打开这个页面点击按钮，可以看到之前的数据是有保留的。</p>
</body>
</html>

localStorage 的优势

  • 1、localStorage 拓展了 cookie 的 4K 限制。
  • 2、localStorage 会可以将第一次请求的数据直接存储到本地，这个相当于一个 5M 大小的针对于前端页面的数据库，相比于 cookie 可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的。

localStorage 的局限

  • 1、浏览器的大小不统一，并且在 IE8 以上的 IE 版本才支持 localStorage 这个属性。
  • 2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换。
  • 3、localStorage在浏览器的隐私模式下面是不可读取的。
  • 4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。
  • 5、localStorage不能被爬虫抓取到。

localStorage 与 sessionStorage 的唯一一点区别就是 localStorage 属于永久性存储，而 sessionStorage 属于当会话结束的时候，sessionStorage 中的键值对会被清空。

sessionStorage实例

（1）什么是sessionStorage

sessionStorage对象是存储特定于某个会话的数据，也就是数据只保存到浏览器关闭，这个对象就像会话cookie，也会在浏览器关闭后消失，存储在sessionStorage中的数据可以跨越页面刷新而存在

（2）如何使用sessionStorage存储数据

由于sessionStorage对象是Storage的一个实例，所以存储数据时可以使用setItem()或者直接设置新的属性来存储数据

// 使用方法存储数据
sessionStorage.setItem(“ifClick”, “true”);

// 使用属性存储数据
sessionStorage.ifClick = “true”;
　　当我们要获取某个数据的时候，可以使用getItem来获取数据

sessionStorage.getItem(“ifClick”);
　　我们现在又成功获取到ifClick的值啦，当然也可以通过length属性和key()方法来获取sessionStorage的值

（3）sessionStorage的特点

a、同源策略限制，若想在不同页面之间对同一个sessionStorage进行操作，这些页面必须在同一协议、同一主机名和同一端口下

b、单标签页限制，sessionStorage操作限制在单个标签页中，在此标签页进行同源页面访问都可以共享sessionStorage数据

c、只在本地存储，seesionStorage的数据不会跟随HTTP请求一起发送到服务器，只会在本地生效，并在关闭标签页后清除数据

d、存储方式，seesionStorage的存储方式采用key、value的方式

e、存储上限限制：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下

我是攻城狮深巷，欢迎关注我的博客:Deep Lane’s Blog和Github:shenxiang216，一起学习更多技术！

本文标签： 三种浏览器区别方式

版权声明：本文标题：浏览器三种存储方式之间的区别 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1726625122a1078683.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。