前端存储

binaryTree 发布于2019-08-06 13:30 / 1415人阅读

摘要：前端存储简介一种在前端保存数据的思想。为了保证前端性能，一般不会保存大量数据。在手动删除前一直存在关闭当前页面后被清除可存放大小与服务器通信每次都在头部信息中。

前端存储 简介

一种在前端保存数据的思想。第一次在页面中的保存数据，那么从第二次开始就可以使用了。可以使用的方法有：

localeStorage

sessionStorage

ie的userData

web sql

indexedDB

从技术角度看待这些方法。没有高低之分，只有对特定任务是否合适。

cookie 简介

cookie："小饼干，小甜品"

参与http通信。因为在http中可以看到cookie，所以易受到攻击。

面向路径。只作用于当前路径（页面）。

每个cookie < 4K

运行机制

使用

总结

设置cookie的值

function setCookie(key, value, duration) {
    // duration 单位为ms
    var d = new Date();
    document.cookie = key + "=" + value + "; " + d.getTime() + duration
}

获取cookie的值

function getCookie(key) {
    var cookieArr = document.cookie.split(";");
    for (var i = 0; i < cookieArr.length; i++) {
        var cookie = cookieArr[i].trim();
        if (cookie.indexOf(key)===0) {
            return cookie.substring(key.length, key.cookie.length);
        }
    }
}

localStorage/sessionStorage

localStorage < 5M

localStorage的使用也是遵循同源策略的，所以不同的网站直接是不能共用相同的localStorage。可以在同网站下跨页面。

sessionStorage只作用于当前页面。

优势
1、localStorage拓展了cookie的4K限制
2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

局限
1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
3、localStorage在浏览器的隐私模式下面是不可读取的
4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
5、localStorage不能被爬虫抓取到

使用

一般在第一次加载页面时在本地保存好数据。从第二次开始使用本地保存的数据。为了保证前端性能，一般不会保存大量数据。只保存关键数据，再根据它做出判断后执行相应的程序。

window.localStorage//boolean 浏览器是否支持

写入(3种形式)

window.localStorage["a"] = 1;
window.localStorage.b = 1;
window.setItem("c",3);

读取

var a = window.localStorage.a;
var b = window.localStorage["b"];
var c = window.localStorage.getItem("c");
var d = window.localStorage.key(d);

修改

window.localStorage.a = 4;

删除

window.localStorage.clear();// 清除据
window.localStorage.removeItem("a");// 删除a

方法

localStorage.setItem("key", "value");
localStorage.getItem("key");
localStorage.removeItem("key");
localStorage.clear();

三者的区别

特性	cookie	localStorage	sessionStorage
生命周期	一般由服务器生成，可设置失效时间。若在浏览器生成，默认关闭浏览器后失效。	在手动删除前一直存在	关闭当前页面后被清除
可存放大小	<4k	<5m	<5m
与服务器通信	每次都在http头部信息中。过多会影响性能	仅在客户端不能与通信	仅在客户端不能与通信
易用性	原生的方法较难使用，自己封装后会好用。	原生的方法就挺好用。可再交封装	原生的方法就挺好用。可再交封装

2018/04/03 by stone

GPU云服务器云服务器 js前端存储方式框架net数据存储前端前端前端前端编程前端

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/61954.html

前端存储 - localStorage

摘要：发布自的博客，欢迎大家转载，但是要注意注明出处介绍在中，引入了两个新的前端存储特性这两者非常相似，都是用来在前端保存一定量的数据，称为前端存储，但是这两者仍然存在一定区别生命周期的生命周期是永久的，即使关闭页面浏览器，其中的内容也不会消失，发布自Kindem的博客，欢迎大家转载，但是要注意注明出处 localStorage 介绍在HTML5中，引入了两个新的前端存储特性： loc...

DandJ 2019-08-22 18:34 评论0 收藏0
前端培训-初级阶段（17） - 数据存储（cookie、session、stroage）

摘要：前端最基础的就是。这是初级阶段的最后一堂了。敏感数据要设置防止意外的被他人获取。是什么服务器端存放数据。都是用来做浏览器端存储的。解决的问题的存储大小问题。该使用索引来实现对该数据的高性能搜索。前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，...

lifefriend_007 2019-08-26 18:27 评论0 收藏0
[聊一聊系列]聊一聊前端存储那些事儿

摘要：如图图顾名思义，，是级别的存储。如笔者写的一篇浅析文章聊一聊百度移动端首页前端速度那些事儿读者们可以尝试使用。欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面（不仅仅是代码）：https://segmentfault.com/blog/frontenddriver 在web开发越来越复杂的今天，前端拥有的能力也越来越多。其中最重要的一项莫过于web存储。...

caige 2019-08-19 18:46 评论0 收藏0
你知道前端对图片的处理方式吗？

摘要：对于第二种存储方式，我们前端需要将其二进制流交由对象处理，然后通过的生成临时赋值给属性来显示。当后端返回特定的图片二进制流的时候，就像我第一里的情景再现说的，前端用容器接收。前言作为前端工程师 de 我们，日常少不了会跟图片打交道。在各大电商平台工作的前端工程师们，感受可能会更加的明显。以下是我之前跟图片打交道踩到的坑，跟大家分享一下经验。一、情景再现用postman请求接口...

helloworldcoding 2019-08-23 15:28 评论0 收藏0