什么是本地存储？

本地存储

 

HTTP协议

http：超文本传输协议

https：超文本传输安全协议

 

http协议的一个特色是无状态，同一个客户端的此次请求和上次请求没有对应关系。

对http服务器来讲，它并不知道这两个请求来自同一个客户端。

为了解决这个问题， Web程序引入了cookie机制来维护状态。

 

 

 

cookie是什么

 

cookie是浏览器提供的一种机制，能够由JavaScript对其进行操做(设置、读取、删除)

cookie是一种会话跟踪技术，是存储于访问者计算机中的一小块数据

 

会话：用户进入网站，开始浏览信息到关闭浏览器的过程，就称之为是一次会话

会话跟踪技术：浏览器和服务器之间在进行屡次请求间共享数据的过程，就称为会话跟踪技术

 

cookie的特性

cookie能够实现跨页面全局变量

cookie能够跨越同域名下的多个网页，但不能跨域使用

cookie会随着HTTP请求发送给服务器

cookie会存储于访问者的计算机中

同一个网站中全部页面共享一套cookie

能够设置有效期限

存储空间为4KB左右

 

cookie应用场景

* 会话状态管理（如用户登陆状态、购物车等）

* 个性化设置（保存用户设置的样式等）

* 浏览器行为跟踪（如跟踪分析用户行为等）

 

cookie的缺点

cookie可能被禁用

cookie与浏览器相关，不能互相访问

cookie可能被用户删除

cookie安全性不够高

cookie会随着HTTP请求发送给服务器

cookie存储空间很小(只有4KB左右)

cookie操做麻烦，没有方便的API

 

操做cookie

每一个cookie都是一个键/值对格式的字符串(key=value)

 

设置cookie：

document.cookie="user1=xh";

document.cookie="user2=xm";

若是要改变一个cookie的值，只能从新赋值

 

设置有效期：

var d=new Date();

d.setDate(d.getDate()+3); //按天数设置

document.cookie="user3=xd; expires="+d;

 

 

读取cookie：

var cookies = document.cookie;

只可以一次获取全部的cookie值

使用时必须本身解析这个字符串，来获取指定的cookie值

 

 

删除cookie：

cookie过时会自动消失

要删除一个cookie，可将其有效期设为一个过去的时间

var d=new Date();

d.setDate(d.getDate()-1);

document.cookie="user1=xh; expires="+d;

 

 

HTML5本地存储

 

H5本地存储有 localStorage 与 sessionStorage 两种

 

优势：

更大的存储空间，有5MB左右

不会随HTTP请求发送给服务器

有方便的API操做

移动端普及高

 

兼容状况:

 

localStorage 为永久性保存数据，不会随着浏览器的关闭而消失。

按域名进行存储，能够在同域名下跨页面访问，不会和其余域名冲突。

按键值对存储：key/value

 

操做：

localStorage.setItem(key , value) 保存或设置数据

若是key已经存在，则覆盖key对应的value

若是不存在则添加key与value

 

localStorage.getItem(key) 获取key对应的value

若是key不存在则返回null

 

localStorage.key(index) 获取指定下标位置的key

 

localStorage.length 获取数据条数（长度）

 

配合key(index)方法能够实现遍历localStorage数据的方法

 

localStorage.clear() 将同域名下的全部数据都清空

 

localStorage.removeItem('key') 删除某个键值对

 

sessionStorage 为临时性保存数据，当页面关闭就会消失

sessionStorage 不能跨页面访问，只局限在当前的标签页

sessionStorage 各类操做与 localStorage 同样

 

 

JSON

 

目前 JavaScript 使用很是多的 json 格式

 

可使用 JSON.stringify() 将 json对象 转为 json字符串

而后把 json字符串 存储在 cookie 或 localStorage 里面

 

读取出来之后使用 JSON.parse() 将 json字符串 转为 json对象

 

示例：

var jsonObj = {"name1":"jack","name2":"lily"};

localStorage.setItem("user",JSON.stringify(jsonObj)); // 存储

 

var jsonObj = JSON.parse(localStorage.getItem("user")); // 读取