前端之 本地缓存

本地缓存的几种方法：

1. localStorage：永久存储，只要不清除缓存，会一直存在。数组，图片，json，样式，脚本。。。（只要是能序列化成字符串的内容都可以存储）
2. sessionStorage：临时存储，只在当前窗口有效，关闭当前窗口或新打开窗口无效
3. cookie：可以设置缓存时间

以下以localstorage为例： 

存值： 

// 自身方法
localStorage.setItem("name","bonly");
// []方法
localStorage["name"]="bonly";
// .方法
localStorage.name="bonly";

 取值：

// 自身方法
localStorage.getItem("name");
// []方法
localStorage["name"];
// .方法
localStorage.name;

改变：（相当于给对应的key重新赋值，就会把原来的值覆盖掉）

// 自身方法
localStorage.setItem("name","TOM");
// []方法
localStorage["name"]="TOM";
// .方法
localStorage.name="TOM";

移除：

// 自身方法
localStorage.removeItem("name");
// []方法
delete localStorage["name"];
// .方法
delete localStorage.name

 获取所有的key：

// 通过自身的key
for (var i=0;i<localStorage.length;i++) {
    console.log(localStorage.key(i));
}
// 通过for in 循环获取
for(var key in localStorage){
    console.log(key);
}

 获取所有的值：

localStorage.valueOf(); //取出所有的值

清除所有的值：

localStorage.clear()

判断是否具有某个key，hasOwnProperty方法：

localStorage.hasOwnProperty("name")
// 如果存在的话返回true，不存在返回false

 

localStorage的属性方法

属性方法	说明
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()	清除所有数据

 localStorage的缺点

• ① localStorage大小限制在500万字符左右，各个浏览器不一致
• ② localStorage在隐私模式下不可读取
• ③ localStorage本质是在读写文件，数据多的话会比较卡（firefox会一次性将数据导入内存，想想就觉得吓人啊）
• ④ localStorage不能被爬虫爬取，不要用它完全取代URL传参

 sessionStorage

和服务器端使用的session类似，是一种会话级别的缓存，关闭浏览器会数据会被清除。不过有点特别的是它的作用域是窗口级别的，也就是说不同窗口间的sessionStorage数据不能共享的。使用方法（和localStorage完全相同）：

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

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

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

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

• 当用户访问 web 页面时，他的名字可以记录在 cookie 中。
• 在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。
• 主要用于购物车、客户登录

Cookie 以名/值对形式存储，如下所示: username=John Doe

当浏览器从服务器上请求 web 页面时， 属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。

JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。

JavaScript 中，创建 cookie 如下所示：

document.cookie="username=John Doe";

您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

在 JavaScript 中, 可以使用以下代码来读取 cookie：

var x = document.cookie;

在 JavaScript 中，修改 cookie 类似于创建 cookie，如下所示：旧的 cookie 将被覆盖。

document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:（注意，当您删除时不必指定 cookie 的值。）

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

sessionStorage和localStorage的区别

• sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。当用户关闭浏览器窗口后，数据立马会被删除。

• localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

Cookie和Session 的区别：

• cookie数据存放在客户的浏览器上，session数据放在服务器上。

• cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑到安全应当使用session。

• session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用cookie。

• 单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
• 所以建议：
  • 将登陆信息等重要信息存放为SESSION
  • 其他信息如果需要保留，可以放在cookie中

 

注意事项
1.localStorage特定于页面的协议，不是同一域名，不能访问。
2.有长度限制，5M左右，不同浏览器大小会有不同。
3.生命周期是永久的，但是数据实际是存在浏览器的文件夹下，可能卸载浏览器就会删除。
4.浏览器可以设置是否可以访问数据，如果设置不允许会访问失败。
5.兼容IE8以上浏览器
6.只能存储字符串类型，需要转成字符串存储。

使用技巧
1.先判断浏览器是否支持localStorage，通过if(!window.localStorage) return;
2.单词太长，不方便书写，可以利用 var storage=window.localStorage;
3.字符串和原始类型需要通过JSON.stringfy转字符串，通过JSON.parse转成对象
4.通过封装方法实现来回转化

借鉴：本地缓存：localstorage使用方法_冰河世纪-CSDN博客

前端几种本地缓存机制_Daisy__xu的博客-CSDN博客

JavaScript Cookie | 菜鸟教程 (runoob.com)

前端缓存方法：前端HTML5几种存储方式的总结 (jquerycn.cn)