八、前端开发语言体系-JavaScript 客户端存储

文章目录

八、前端开发语言体系-JavaScript 客户端存储
- JavaScript 客户端存储
- - 客户端存储简介
  - Cookie
  - LocalStorage
  - SessionStorage
- 参考文章

JavaScript 客户端存储

客户端存储简介

在前端开发过程中，为了与服务器更方便的交互或者提升用户体验，我们都会在客户端（用户）本地保存一部分数据。Web应用允许使用浏览器提供的 API 实现将数据存储到用户的电脑上。

客户端存储的方案：

传统：

Cookie：把信息存储到客户端的浏览器中（但是项目服务器端也是可以获取COOKIE的）
Session：把信息存储到服务器上的（服务器存储）

HTML5：WebStorage

LocalStorage：永久存储在客户端的本地
SessionStorage：信息的会话存储，会话窗口存在信息也存在，会话窗口关闭信息就消失了（针对 Session 的数据存储）

我们可以认为，传统的 Session 存储会被 SessionStorage 所替代，这里不再对它进行介绍。

Cookie

Cookie是指Web浏览器存储的少量数据，用于浏览器存储会话信息，每个Cookie的大小一般不能超过4KB。cookie默认的有效期很短暂，它只能持续在Web浏览器的会话期间，一旦用户关闭浏览器，cookie保存的数据就会丢失。

Cookie保存以下几方面的信息：

Cookie的名字
Cookie的值
到期时间
所属域名（默认是当前域名）
生效的路径（默认是当前网址）

Cookie的值必须写成“key=value”的形式，等号两边不能有空格。而且在写入Cookie的时候，必须对分号、逗号和空格进行转义（它们都不允许作为Cookie的值）。

document.cookie属性是可写的，可以通过它为当前网站添加Cookie。document.cookie一次只能写入一个Cookie，这个写入并不是覆盖，而是添加。

如果要延长cookie的有效期，就需要设置max-age属性来指定cookie的有效期（单位是秒）

document.cookie = 'test1=hello';
document.cookie = 'test2=world';
document.cookie = 'user=TG;max-age=606024';  //将有效期设置为一天 document.cookie     //读取当前页面的所有cookie // test1=hello; test2=world; user=TG

除了Cookie本身的内容，还有一些可选的属性也是可以写入的，它们都必须以分号分隔。

Set-Cookie: value[; expires=date][; domain=domain][; path=path][; secure][; max-age=number]

value属性
- value属性是必需的。它是一个键值对，用于指定Cookie的值
expires属性
- expires属性用于指定Cookie过期时间。如果不设置该属性，或者设为null，Cookie只在当前会话有效，浏览器窗口一旦关闭，该Cookie就会被删除。
domain属性
- domain属性指定Cookie所在的域名。如果未指定，默认为设定该Cookie的域名，所指定的域名必须是当前发送Cookie的域名的一部分。
- 只有访问的域名匹配domain属性，Cookie才有可能发送到服务器。
path属性
- path属性用来指定cookie存储路径，必须是绝对路径，如果未指定，默认为请求该Cookie的网页路径。
- path属性生效的前提是domain属性匹配。只有path属性匹配向服务器发送的路径，Cookie才会发送。（这里的匹配不是绝对匹配，而是从根路径开始，只要path属性匹配发送路径的一部分，就可以发送。）
secure属性
- secure属性用来指定Cookie只能在加密协议HTTPS下发送到服务器。
- 该属性只是一个开关，不需要指定值。如果通信是HTTPS协议，该开关自动打开。
max-age属性
- max-age属性用来指定Cookie有效期，以秒为单位。

浏览器对Cookie数量的限制，规定不一样。目前，Firefox是每个域名最多设置50个Cookie，而Safari和Chrome没有域名数量的限制。

所有Cookie的累加长度限制为4KB。超过这个长度的Cookie，将被忽略，不会被设置。

Cookie实例：

function setCookie(cname, cvalue, exdays) {//创建cookie，三个参数分别为：键、值、保存的天数var d = new Date();d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));var expires = "expires="+d.toUTCString();document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}function getCookie(cname) {//查找键为“cname”的cookievar name = cname + "=";var ca = document.cookie.split(';');for(var i = 0; i < ca.length; i++) {var c = ca[i];while (c.charAt(0) == ' ') {c = c.substring(1);}if (c.indexOf(name)  == 0) {return c.substring(name.length, c.length);}}return "";
}
function delCookie(cname){//删除键为“cname”的cookie/*删除 cookie 非常简单，不必指定 cookie 值，直接把 expires参数设置为过去的日期即可*/var exp = new Date();exp.setTime(exp.getTime() - 1);var cval=getCookie(name);if(cval!=null)document.cookie= cname + "="+cval+";expires="+exp.toGMTString();
}setCookie("name","bolly",10);
getCookie("name");
delCookie("name");

LocalStorage

优势：

LocalStorage 拓展了 Cookie 的 4K 限制，这个相当于一个 5M 大小的针对于前端页面的数据库，相比于 Cookie 可以节约带宽。
LocalStorage用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。

局限:

只有在高版本的浏览器中才支持 LocalStorage，比如 IE 浏览器只有 IE8 以上才进行支持。
目前所有的浏览器中都会把 LocalStorage 的值类型限定为 String 类型，这个在对我们日常比较常见的 JSON 对象类型需要一些转换。
LocalStorage在浏览器的隐私模式下面是不可读取的。
LocalStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。
LocalStorage不能被爬虫抓取到。

LocalStorage 的使用也是遵循同源策略的，所以不同的网站是不能共用相同的 LocalStorage。

LocalStorage创建的是一个本地存储的 name/value 对，写入和读取各自有三种方式，官方推荐使用 setItem\getItem 这两种方法对其进行存取。

//写入
localStorage.setItem('user',101);//存储一个以“user”为名字的值
localStorage["user"] = 101;
localStorage.user = 101;//读取
localStorage.getItem('user');  //读取以“user”为名字的值
localStorage["user"]
localStorage.user

建立了 LocalStorage 数据之后，我们可以使用 removeItem( ) 和 clear( ) 方法来删除。

localStorage.removeItem('user');//删除名为“user”的数据。
localStorage.clear();           //删除所有存储的数据

LocalStorage 中有一个 key( ) 方法可以根据索引获取到当前的键值，一般用于遍历存储数据。

for(var i=0; i < localStorage.length; i++){ var name = localStorage.key(i);  //获取第 i对的名字 var datas = localStorage.getItem(name); //获取该对的值
}

因为 LocalStorage 存储的是 String 对象，如果我们想把 JSON 对象存入的话必须进行转换。

JSON.stringify( ) 方法可以将 JSON 对象转换成为 JSON 字符串
JSON.parse( ) 方法可以将 JSON 字符串转换成为 JSON 对象

var storage = window.localStorage;
var person = {name:'xiecanyong',sex:'man',hobby:'program'
};var data = JSON.stringify(person);
storage.setItem("user",data);var jsons=storage.getItem("data");
var jsonObj=JSON.parse(jsons);

SessionStorage

Storage对象是一个持久化关联数组，数组使用字符串来索引，存储的值都是字符串形式的。LocalStorage和SessionStorage这两个属性都代表同一个Storage对象。

LocalStorage和SessionStorage的区别在于存储的有效期和作用域的不同。

LocalStorage存储的数据是永久性的，除非主动删除，否则数据一直留在用户的电脑中。
LocalStorage的作用域是限定在文档源（document origin）级别。同源的文档间共享同样的localStorage数据。
SessionStorage用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
SessionStorage的作用域同样是限定在文档源中，不过它被限定在窗口中。也就是说，如果同源的文档在不同的浏览器标签页中，那它们互相之间拥有的是各自的SessionStorage数据，无法共享。如果一个浏览器标签页包含多个元素，它们包含的文档是同源的，两者之间的SessionStorage是可共享的。

SessionStorage 的用法和 LocalStorage 完全一致，参照 LocalStorage 进行使用即可。

参考文章

js基础-客户端存储（Cookie、Storage、IndexedDB）

基于js 本地存储(详解)

W3School-JavaScript Cookies

前端开发的客户端本地存储

Window localStorage 属性

八、前端开发-JavaScript 客户端存储相关推荐

第二章前端开发——JavaScript
第二章前端开发学习--JavaScript 一.初识JavaScript 二.JavaScript基础三.JavaScript数据类型四.JavaScript运算符五.JavaScript流程 ...
广州蓝景分享—前端开发JavaScript中的Array对象与其他数组
各位小伙伴好,今天我们广州蓝景与大家分享一些前端技术知识. JavaScript中的Array对象与其他编程语言中的数组一样,可以将多个项目的集合存储在单个变量名下,并具有用于执行常见数组操作的成员. ...
五、前端开发-JavaScript基础
五.前端开发语言体系-JavaScript基础文章目录五.前端开发语言体系-JavaScript基础 JavaScript基础变量.值和类型运算符和表达式语句数组函数和对象严格模式类 ...
七、前端开发-JavaScript HTTP
七.前端开发语言体系-JavaScript HTTP 文章目录七.前端开发语言体系-JavaScript HTTP JavaScript AJAX AJAX简介 AJAX-XMLHttp AJAX请 ...
六、前端开发-JavaScript DOM
六.前端开发语言体系-JavaScript DOM 文章目录六.前端开发语言体系-JavaScript DOM JavaScript DOM DOM简介 DOM方法 DOM事件 DOM事件监听器 D ...
Web前端开发JavaScript基础(3)
JavaScript 一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它的解释器被称为JavaScript引擎,是浏览器的一部分,并且是被广泛用于客户端的脚本语言,JavaS ...
前端开发 JavaScript 规范文档
一,规范目的为提高团队协作效率,便于前端后期优化维护,输出高质量的文档. 二.基本准则符合web标准,结构表现行为分离,兼容性优良.页面性能方面,代码要求简洁明了有序, 尽可能的减小服务器负载,保 ...
渡一教育公开课web前端开发JavaScript精英课学习笔记（六）函数及作用域
函数作用域函数有个隐藏的属性[[scope]],这个属性就是作用域,其存储了运行期上下文的集合. [[scope]]存储运行期上下文集合,这些集合呈链式关系,就是作用域链. [[scope]]属性结 ...
前端开发-JavaScript进阶篇
神奇的js越来越喜欢它了一.让你认识JS 你知道吗,Web前端师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面, ...

八、前端开发-JavaScript 客户端存储