前端本地缓存机制

首先来解答一下：本地缓存是什么？
        是指将客户机本地的物理内存划分出一部分空间用来缓冲客户机回写到服务器的数据。
我们在浏览器打开一个页面，展示的一些内容和数据需要后端的通信，浏览器在发送请求的时候需要附加一些参数用来表明你的身份，以供服务器识别的时候；当有一些前端数据需要跨页面使用，在一个页面内获取在另一个页面内使用的时候；当你需要在页面关闭后再次打开，页面仍然保持原本状态时；都需要用缓存。

一、cookie

        cookie是比较老的前端缓存技术，它的特点是想要用它的话，前端必须要有服务，静态网页不可以，存储大小闲置在4kb。它的出现其实是为了供http服务器识别你的身份，当你每次访问http服务器的时候，都会返回一个cookie，用于标记用户，当再次访问服务器时，cookie会跟随请求一同发出，这样服务器就可以识别用户的信息。
        cookie是纯文本，它的值既可以设置也可以来读取，通过document.cookie这种形式获取的cookie值包含当前网站下所有的cookie，但是为了防止跨域脚本的攻击，只有满足非HttpOnly类型的cookie才能被获取。

document.cookie='名字=值'

        cookie是存放在前端的，而且通常cookie信息都是通过http链接传递数据，这种方式的安全性就比较差，很容易被获取到。cookie不是有个secure属性么？secure属性的设置只能保证cookie与服务器之间的数据传输过程加密，而保存在本地cookie文件并不会加密。所以像一些在每次请求中都需要附加的信息，比如身份认证信息就可以通过cookie存储，其他需要更安全存储的数据就不合适了。
总结一些特点：

• 不同浏览器存放的cookie位置不一样，不能通用。
• cookie的存储以域名的形式来区分，不同域名下存储的cookie是独立的。
• 可以设置cookie生效的是当前域还是当前域下的所有子域。
• 一个域名下存储的cookie的个数有限制，且不同浏览器数量不同，一般为20个。
• 每个cookie存储的内容大小有限制，且不同浏览器不一样，一般为4kb。
• cookie可以设置过期时间，默认是会话结束，自动销毁。

二、session

        session是一种服务器端的机制，服务器使用一种类似散列表的形式来存储信息，安全性相对好一些。它的原理是通过session id来识别客户端，当程序需要为某个客户端的请求创建一个session时，服务器会先检查这个请求中是否已包含一个session id，如果包含就说明以前创建过，就可以直接检索出这个session使用。如果没有检查出session id，就会新创建一个session，并生成一个和session相关的、不会重复的、不易识破规律仿造的session id，并在这请求的响应中将session id返回给客户端。这个session id存放在cookie中，或者通过url重写的形式，将session id附加在url的后面。

http://www.xxx.com/sessionid=123456

session和cookie的安全性比较，差距就很明显，一个把数据存放在客户端，一个存放在服务端，所以一般将用户密码这种私密的信息放在session之中。

属性方法	备注
localStorage.length	获得storage中的个数
localStorage.key(n)	获得storage中第n个元素对的键值（第一个元素是0）
localStorage.getItem(key)	获取键值key对应的值
localStorage.key	获取键值key对应的值
localStorage.setItem(key,value)	添加数据，键值为key，值为value
localStorage.removeItem(key)	移除键值为key的数据
localStorage.clear()	清除所有数据

localStroage的本质是在读写文件，所以数据多的话会比较卡。

四、sessionStorage

        sessionStorage和服务器端存的session类似，是一种会话级别的本地存储，关闭浏览器后就会消失。它的特点是作用域是窗口级别的，也就是说窗口间的sessionStorage数据不能共享。

        sessionStorage主要用于仅针对会话的小段数据的存储。
        后两种存储方式属于Web Storage，都是Storage的实例，这种类型只能存储字符串，非字符串的数据。这两个对象在浏览器中都是以windows对象的属性存在的，它是为了更大容量的存储而设计的。