发表于： 2019-10-02 22:05:03
1 778
今天完成的事情：
1.把小课堂整理了一下，然后学习vuex视频，明天动手进行编辑使用
请描述一下cookies，sessionStorage和localStorage的区别？
（1）背景介绍：
在html5出来之前，cookie一直作为本地存储的一个方法来使用。后来html5提供了一种在客户端本地保存数据的功能，它就是Web Storage，具体来说，Web Storage又分为两种：localStorage和sessionStotage在客户端存储数据，WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。
（2）知识剖析：
1、cookie：
(1)、cookie英文饼干，顾名思义，大小应该非常小，cookie非常小，它的大小限制在4kb左右，是网景公司的前雇员在1993年发明。它的主要用于保存登陆信息，比如你登陆某个网站市场可以看到'记住密码’,这就是通过在cookie中存入一段辨别用户身份的数据来实现的。
(2)、localStorage：
localStorage是HTML5标准中新加入的技术，当然早在IE6时代就有一个userData的东西用于本地存储，而当时考虑到浏览器的兼容性，更通用的方案是使用flash。如今localStorage被大多数浏览器所支持。
(3)、sessionStorage：
sessionStorage与localStorage的接口类似，但保存数据的生命周期与localStorage不同，做过后端的同学都知道Session这个词，翻译过来就是会话。而sessionStorage是前端的一个概念。它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但是页面关闭后，sessionStorage中的数据就会被清空。
（3）常见问题：
上面所说三者的区别是什么？
（4）解决方案：
(1)、数据上的生命周期的不同
Cookie 一般由服务器生成，可设置失效时间，如果在浏览器端生成cookie，默认是关闭后失效。
localStorage 除非被永久清除，否则永久保存。
sessionStorage 仅在当前会话会有效，关闭页面或浏览器后被清除
(2)、存放数据的大小不同
Cookie 一般为4kb
localStorage 和 sessionStorage 一般为5mb
(3)、与服务器端通信不同
Cookie 每次都会携带HTTP头中，如果使用cookie保存过多数据会带来性能问题
localStorage 和 sessionStorage 仅在客户端（即浏览器）中保存，不参与和服务器的通信。
(4)、易用性
Cookie 需要程序员自己来封装，原生的cookie接口不够友好
localStorage 和 sessionStorage 原生接口可以接受，可以封装来对Object和Array有更好的支持。
(5)、快速显示
有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快；
WebStorage提供了一些方法，数据操作比cookie方便；
setItem (key, value) —— 保存数据，以键值对的方式储存信息。
getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。
removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
clear () —— 删除所有的数据
key (index) —— 获取某个索引的key
（5）编码实战：
html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Web Storage</title>
</head>
<body>
<h1>Web Storage </h1>
<p id="msg"></p>
<input type="text" id="input" />
<input type="button" value="保存数据" onclick="saveStorage('input');" />
<input type="button" value="读取数据" onclick="loadStorage('msg');" />
<script src="storage.js"></script>
</body>
</body>
</html>
js：
//sessionStorage 示例 (保存一个会话周期:从打开浏览器——到关闭浏览器窗口)
function saveStorage(id){
var target=document.getElementById(id);
var str=target.value;
sessionStorage.setItem("message",str);
//或者sessionStorage.message=str;
}
function loadStorage(id){
var target=document.getElementById(id);
var msg=sessionStorage.getItem("message");
//或者var msg=sessionStorage.message;
target.innerHTML=msg;
}
//localStorage 示例(可永久保存)
function saveStorage(id){
var target=document.getElementById(id);
var str=target.value;
localStorage.setItem("message",str);
//或者localStorage.message=str;
}
function loadStorage(id){
var target=document.getElementById("msg");
var msg=localStorage.getItem("message");
//或者var msg=localStorage.message;
target.innerHTML=msg;
}
（6）拓展思考：
三者的使用场景
localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据,也可以用来统计页面访问次数。
sessionStorage用于保存每个用户的专用信息，变量的值保存在服务器端，通过SessionID来区分不同的客户。也可以用来统计当前页面元素的点击次数。比如杀人游戏
cookie，判断用户是否登陆过网站，以便下次登录时能够实现自动登录。如果我们删除cookie，则每次登录必须重新填写登录的相关信息。比如页面一键换色，下次打开是换后的颜色。
（7）参考文献：
参考一：cookie,localStorage,SessionStorage三者的区别
https://www.cnblogs.com/yaogengzhu/p/11006547.html
参考二：cookies、sessionStorage和localStorage解释及区别
https://www.cnblogs.com/pengc/p/8714475.html
明天计划：
进行页面的编辑功能添加
返回列表
评论