聊聊前端的本地存储

什么是本地存储

• 本地存储就是把一些信息存储在当前浏览器的指定域下的某个地方（存储到某一个物理硬盘中）

本地存储的特点：

• 1、不能跨浏览器传输：在谷歌浏览器中存储的信息，在IE浏览器中无法获取，因为本地存储是存在当前浏览器中的某个具体位置的
• 2、不能跨域传输：在京东域下存储的信息，在淘宝域下不能获取到（也是为了保证信息的安全性）
• 3、本地存储并不安全，有一些大神们可以找到每个浏览器存储信息的位置，然后把信息进行解码编译，导致客户端一些存储的信息泄露 ...

前端本地存储的常用方式：cookie、localStorage、sessionStorage

服务器端存储方式：把信息存储在指定的服务器中（真实项目中大部分都是基于服务器进行存储的）

细说cookie：

• 1、兼容性：兼容所有的浏览器
• 2、cookie有过期时间（我们可以自己设置，一般都不会设置很长），要是不设置过期时间，cookie就会在浏览器关闭之后随之关闭
• 3、cookie会在服务器和浏览器之间来回传送（本地文件不能测试cookie）。而且cookie数据始终在同源的http请求中携带（即使不需要），这也是Cookie不能太大的重要原因。正统的cookie分发是通过扩展HTTP协议来实现的，服务器通过在HTTP的响应头中加上一行特殊的指示以提示浏览器按照指示生成相应的cookie。
• 4、cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑到安全应当使用session，重要的信息不建议在本地进行存储（例如：用户名、密码、手机等），如果非要存储，一定要做好加密工作

细说localStorage（本地永久存储）

• 1、没有过期时间，只要不手动设置过期时间，就会永远保存在本地
• 2、所有低版本的浏览器都不兼容
• 3、localStorage允许一个域下最多可以存储5MB左右的内容
• 4、是完全的本地存储，和服务器没有半毛钱的关系，
• 5、localStorage的缺点：
  • ① localStorage大小限制在500万字符左右，各个浏览器不一致
  • ② localStorage在隐私模式下不可读取
  • ③ localStorage本质是在读写文件，数据多的话会比较卡（firefox会一次性将数据导入内存，想想就觉得吓人啊）
  • ④ localStorage不能被爬虫爬取，不要用它完全取代URL传参

 <!--使用方法存储数据-->
localStorage.setItem('name', 'Nicholoas');
 <!--使用属性存储数据-->
localStorage.book = 'Pro JS';
<!--使用方法读取数据-->
var name = localStorage.getItem('name');
 <!--使用属性读取数据-->
var book = localStorage.book;
复制代码

sessionStorage

• sessionStroage：本地会话存储，当前页面关闭，代表着会话结束，会把存储的信息自动清除（刷新页面不会清除）

localStorage和sessionStorage：

• 他们都是H5中新增加的API（不兼容低版本浏览器，常应用于移动端开发）
• 他们的共同方法：
  • setItem([key],[value])：通过键值对的方式把信息存储在客户端本地（存储在本地的信息值都是字符串格式的）
  • getItem([key])：获取本地存储信息中指定属性名的属性值
  • removeItem([key])：把本地存储信息中指定属性名的信息删除掉
  • clear()：把本地存储的信息都删除掉（清空：只能清空当前浏览器自己域下的信息）
  • key([index])：本次存储的信息是有一定顺序的（一般都是按照存储的先后顺序），我们可以把所有存储的信息理解为一个信息集合，key就是通过索引获取这个集合中指定位置的属性名信息的

cookie的用法：

<!--COOKIE-->
let  cookie = (function() {
    letsetValue = (name, value, expires = (newDate(newDate().getTime()+ (1000* 60* 60* 24))), path= '/', domain= '')=>{
        document.cookie = `${name}=${escape(value)};expires=${expires.toGMTString()};path=${path};domain=${domain}`;
    };

    letgetValue = name=>{
        letcookieInfo = document.cookie,
            reg = newRegExp(`(?:^| )${name}=([^;]*)(?:;|$)`),
            ary = cookieInfo.match(reg);
        returnary ? unescape(ary[1]) : null;
    };

    letremoveValue = (name, path = '/', domain = '')=>{
        letvalue = getValue(name);
        if(value) {
            document.cookie = `${name}= ;path=${path};domain=${domain};expires=Fri,02-Jan-1970 00:00:00 GMT`;
        }
    };

    return{
        set: setValue,
        get: getValue,
        remove: removeValue
    }
})();

复制代码

使用360等安全卫士清理垃圾的时候，或者使用浏览器自带的清理工具的时候，都极有可能会把本地存储的cookie都干掉，但是目前是干不掉localStorage存储的信息的

在项目当中的用法：真实项目中PC端开发，如果需要存储的信息比较重要（例如：登录信息、购物车信息等），需要兼容的，只能用cookie，其余不需要考虑兼容的，根据需求自己选择即可

转载于:https://juejin.im/post/5c25b86e5188257e2a7b7cc4