在本文中，我们将为您详细介绍web的本地存储技术cookie,localStorage,sessionStorage的相关知识，并且为您解答关于web本地存储常用的两个对象分别是的疑问，此外，我们还会

在本文中，我们将为您详细介绍web的本地存储技术cookie,localStorage,sessionStorage的相关知识，并且为您解答关于web本地存储常用的两个对象分别是的疑问，此外，我们还会提供一些关于cookie localstorage sessionStorage、Cookie sessionStorage localStorage、cookie sessionStorage localStorage之间的区别、Cookie, LocalStorage 与 SessionStorage异同的有用信息。

本文目录一览：

• web的本地存储技术cookie,localStorage,sessionStorage（web本地存储常用的两个对象分别是）
• cookie localstorage sessionStorage
• Cookie sessionStorage localStorage
• cookie sessionStorage localStorage之间的区别
• Cookie, LocalStorage 与 SessionStorage异同

web的本地存储技术cookie,localStorage,sessionStorage（web本地存储常用的两个对象分别是）

1.cookie

cookie是由服务器端生成，发送给浏览器，浏览器会将Cookie的key/value保存到某个目录下的文本文件内，下次请求同一网站时就发送该Cookie给服务器。

cookie的存储量仅有4K.

2.localStorage与SeeeionStorage

localStorage与SeeeionStorage是H5新兴的本地浏览器存储.

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

sessionStorage和localStorage的存储容量有5M相比于cookie有了较高的提升。

sessionStorage：在当前浏览器窗口关闭前有效，不能持久保持数据；sessionstorage不能在不同的浏览器窗口共享,即使是同一个页面.

localStorage：始终有效，窗口或浏览器关闭也一直保存，所以可以用作保存持久数据； localStorage在所有同源窗口中都是共享的.

cookie localstorage sessionStorage

cookie

保存在浏览器端的用户信息的文本，约4k 120~150条
 cookie必须在服务器环境下，cookie第一次在服务器生成，响应给客户端
 客户端发起请求时，cookie会跟随请求一起发送到服务器端
 优点：能记录用户信息，保持状态
 缺点：消耗相当的带宽网络资源，可能泄露用户的私隐
    

---

cookie怎么用?
请看下面的code:
   
// 1.获取cookie
function getCookie(name) {
    var cookies = document.cookie.split("; ");//所有cookie条数组成的数组
    for(var i = 0; i < cookies.length; i++) {
        var arr = cookies[i].split("=");// 将name199=value199字符串以=号分割
        if(name === arr[0]) {
            return arr[1]; // 找到立即返回
        }
    }
    return ""; //找不到返回空
}

// 2.设置cookie
// expires 天
function setCookie(name, value, expires) {
    document.cookie = name + "=" + value + ";Max-Age = " + expires * 24 * 60 * 60;
}

// 3.清除cookie
function clearCookie(name) {
    setCookie(name, "", -1);
}
 

localStorage

 本地存储，5M，不需要服务器环境，一直保留在浏览器;但是不能跨客户端跨浏览器
localStorage.getItem(name)        获取
localStorage.setItem(name, value) 设置
localStorage.removeItem(name)     移除
 

sessionStorage

会话，跟localStorage 时效不一致，浏览器或当前页面关闭，信息不保存
sessionStorage.getItem(name)        获取
sessionStorage.setItem(name, value) 设置
sessionStorage.removeItem(name)     移除

Cookie sessionStorage localStorage

共同点:都是保存在浏览器端，同源。 区别：cookie数据始终在同源的http请求携带，即cookie在浏览器和服务器间来传递。而sessionStorage 和localStorage 不会自动把数据发给服务器，仅本地保存。cookie数据不能超过4k,sessionStorage 和 localStorage 容量较大，数据有效期不同，sessionStorage:仅在当前浏览器窗口关闭前有效。localStorage: 始终有效，窗口或者浏览器关闭也一直保存，需手动清楚，cookie 只在设置的cookie过去时间之前一直有效，即使窗口或者浏览器关闭，作用域不同。sessionStorage不在不同的浏览器窗口汇总共享。localStorage 在所有同源窗口中都是共享的，cookie 也是所有同源窗口中都共享的。

应用场景。locaStorage 常用于长期登录（判断用户是否已登录），适合长期保持在本地的数据，sessionStorage ：敏感账号一次性登录。cookies与服务器交互。

cookie sessionStorage localStorage之间的区别

1.cookie:存储在用户本地终端上的数据。有时也用cookies，指某些网站为了辨别用户身份，进行session跟踪而存储在本地终端上的数据，通常经过加密。一般应用最典型的案例就是判断是否已经登过该网站。

2.HTML5提供了两种在客户端存储数据的新方法：

两者都是在客户端中保存，不参与和服务器之间的通信

localStorage 没有时间限制的数据存储，第二天第三天或一年之后都可用

如何创建和访问 localStorage

<script type="text/javascript">

localStorage.lastname=''Smith'';

document.write(localStorage.lastname);

</script>

下面的例子对用户访问页面的次数进行计数：

<script type="text/javascript">
  if(localStorage.pagecount){

    localStorage.pagecount=Number(localStorage.pagecount)+1;
 }else{
    localStorage.pagecount=1;
    }
document.write(''Visits''+localStorage.pagecount+''time(s).'')


</script>

sessionStorage 针对一个session的数据存储，当用户关闭浏览器窗口后，数据会被删除

.创建并访问一个sessionStorage:

<script type="text/javascript">
 sessionStorage.lastname=''smith'';
document.wirte(sessionStorage.lastname)
</script>

sessionStorage  localStorage  cookie之间的区别

cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；

cookie数据还有路径的概念，可以限制cookie只属于某个路径下。

存储大小限制也不同，cookie数据不能超过4k,同时因为每次http请求会携带cookie，所以cookie只适合保存很小的数据，如会话标识

.而sessionStorage 和localStorage不会自动把数据发给服务器，仅咋本地保存。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大的多，可以达到5m或更大

.数据有效期不同，sessionStorage:仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage:始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期之前一直有效，即使窗口或浏览器关闭。

作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。web Storage支持事件通知机制，可以将数据更新的通知发送给监听者。

应用场景

有了对上面这些差别的直观理解，我们就可以讨论三者的应用场景了。

因为考虑到每个 HTTP 请求都会带着 Cookie 的信息，所以 Cookie 当然是能精简就精简啦，比较常用的一个应用场景就是判断用户是否登录。针对登录过的用户，服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录啦。曾经还使用 Cookie 来保存用户在电商网站的购物车信息，如今有了 localStorage，似乎在这个方面也可以给 Cookie 放个假了~

而另一方面 localStorage 接替了 Cookie 管理购物车的工作，同时也能胜任其他一些工作。比如HTML5游戏通常会产生一些本地数据，localStorage 也是非常适用的。如果遇到一些内容特别多的表单，为了优化用户体验，我们可能要把表单页面拆分成多个子页面，然后按步骤引导用户填写。这时候 sessionStorage 的作用就发挥出来了。

Cookie, LocalStorage 与 SessionStorage异同

不同

1. cookie由服务端生成，用于标识用户身份；而两个storage用于浏览器端缓存数据

2. 一般情况下浏览器端不会修改 cookie，但会频繁操作两个storage

3. cookie有path概念，子路径可以访问父路径 cookie，父路径不能访问子路径 cookie

4. 有效期： cookie在设置的有效期内有效，默认为浏览器关闭；sessionStorage在窗口关闭前有效，localStorage长期有效，直到用户删除

5. 浏览器不能保存超过300个 cookie，单个服务器不能超过20个，每个 cookie不能超过4k。web storage大小支持能达到5M

6. 共享：sessionStorage不能共享，localStorage在同源文档之间共享， cookie在同源且符合path规则的文档之间共享

7. 如果保存了 cookie的话，http请求中一定会带上；而两个storage可以由脚本选择性的提交

8. 安全性方面， cookie中最好不要放置任何明文的东西。两个storage的数据提交后在服务端一定要校验

相同

1. 三者都是键值对的集合

2. 都会在浏览器端保存，有大小限制，同源限制

扩展阅读

HTML5本地存储——IndexedDB（一：基本使用）

cookie隔离
即优化方案中提到的静态资源放在不带cookie的域名下的解决方案
如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量， 所以不如隔离开。 因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据， 这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。 同时这种方式不会将cookie传入Web Server，也减少了Web Server对cookie的处理分析环节， 提高了Web Server的http请求的解析速度。

参考资料

详说 Cookie, LocalStorage 与 SessionStorage
为什么很多网站的静态资源会使用独立的域名？

关于web的本地存储技术cookie,localStorage,sessionStorage和web本地存储常用的两个对象分别是的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于cookie localstorage sessionStorage、Cookie sessionStorage localStorage、cookie sessionStorage localStorage之间的区别、Cookie, LocalStorage 与 SessionStorage异同等相关知识的信息别忘了在本站进行查找喔。

本文标签：

• web_local_storage
• cookie_sessionStorage
• Localstorage
• session_storage