js提取指定网站内容( 关于cookie的使用设置获取键名过期的事件，IE8及以上浏览器都兼容特点)

　　js提取指定网站内容(

关于cookie的使用设置获取键名过期的事件，IE8及以上浏览器都兼容特点)

　　一、如何

　　我们主要介绍以下四种javaScript本地缓存的方法：

　　cookies

　　Cookies，属于“小文本文件”类型，是指存储在用户本地终端上的特定数据网站，用于识别用户。就是解决HTTP无状态带来的问题

　　作为一条一般不超过4KB的小文本数据，由名称（Name）、值（Value）和其他几个可选属性组成，用于控制有效期、安全性和使用范围饼干

　　但是，cookie 将在每个请求中发送。如果不使用HTTPS并进行加密，其中存储的信息很容易被窃取，从而产生安全隐患。比如在一些使用cookies保持登录状态的网站s上，如果cookie被盗，别人很容易利用你的cookie冒充你登录网站

　　关于cookies的常用属性如下：

　　Expires=Wed, 21 Oct 2015 07:28:00 GMT

　　Max-Age=604800

　　Path=/docs # /docs/Web/ 下的资源会带 Cookie 首部

　　通过以上我们可以看出cookie的作用并不是为缓存而设计的，只是借用cookie的特性来实现缓存

　　cookies的使用如下：

　　document.cookie = '名字=值';

　　关于cookies的修改，首先要确保domain和path属性相同，当其中一个不同时会创建一个新的cookie

　　Set-Cookie:name=aa; domain=aa.net; path=/ # 服务端设置

document.cookie =name=bb; domain=aa.net; path=/ # 客户端设置

　　删除最后一个cookie最常用的方法是为cookie设置过期事件，这样cookie过期后会被浏览器删除

　　本地存储

　　HTML5新方法，兼容IE8及以上浏览器

　　特点

　　我们来看看localStorage的使用

　　设置

　　localStorage.setItem('username','cfangxu');

　　获取

　　localStorage.getItem('username')

　　获取密钥名称

　　localStorage.key(0) //获取第一个键名

　　删除

　　localStorage.removeItem('username')

　　一次性清空所有存储空间

　　localStorage.clear()

　　localStorage 也不完美，它有两个缺点：

　　localStorage.setItem('key', {name: 'value'});

console.log(localStorage.getItem('key')); // '[object, Object]'

　　会话存储

　　sessionStorage 和 localStorage 的用法基本相同，唯一不同的是生命周期。一旦页面（会话）关闭，sessionStorage 将删除数据

　　扩展的前端存储方式

　　indexedDB 是一种用于客户端存储大量结构化数据（包括文件/blob）的低级 API。 API 使用索引来实现对这些数据的高性能搜索

　　虽然网络存储对于存储少量数据很有用，但对于存储大量结构化数据的用处不大。 IndexedDB 提供了解决方案

　　优点：缺点：

　　使用indexedDB的基本步骤如下：

　　indexdb 的使用会比较麻烦。可以使用 Godb.js 库进行缓存，尽量降低操作难度

　　二、区别

　　cookies、sessionStorage和localStorage的主要区别如下：

　　三、应用场景

　　了解了上面提到的前端缓存方式后，我们可以看看不正确场景的使用选项：