前端数据存储 cookie sessionStorage localStorage

Cookie

是一种以文本形式存在于客户端的数据；由于cookie储存大小的限制即具有保质期，所以一般用于记录用户的登录信息；
cookie的使用除了本地存储数据信息，还可以携带在请求头里传递给后台，用于客户端身份标识等

使用JavaScript对cookie进行操作
1.创建cookie

// 创建的时候可以添加cookie的过期时间；如果不加则默认页面关闭删除cookie
document.cookie="username=fk; expires=Thu, 18 Dec 2043 12:00:00 GMT";

2.读取cookie

// 这里读取的是所有的cookie；返回的数据是字符串格式
var cookie = document.cookie;

3.修改cookie

// 覆盖原来的cookie
document.cookie="username=fk123; expires=Thu, 18 Dec 2043 12:00:00 GMT;";

4.删除cookie

// 设置字段为空；或者设置过期时间
document.cookie="username=''; expires=Thu, 18 Dec 2043 12:00:00 GMT";

sessionStorage

临时存储的方式之一，解决cookie存储内存大小受限制的问题；其存储的数据值存在于当前标签页，标签页关闭时其存储数据删除

使用语法
1.创建

sessionStorage.setItem('name','fk')

2.读取

sessionStorage.getItem('name')

3.修改

sessionStorage.setItem('name','fk123')

4.删除

// 删除指定数据
sessionStorage.removeItem('name')

//删除所有
sessionStorage.clear()

localStorage

H5本地存储的方式，同sessionStorage一样解决了cookie存储内存大小受限制的问题；但不同sessionStorage，它会长久保存数据，直到手动删除数据为止
因其特性我们可用登录页记住用户等功能

使用语法
1.创建

localStorage.setItem('name','fk')

2.读取

localStorage.getItem('name')

3.修改

localStorage.setItem('name','fk123')

4.删除

localStorage.removeItem('name')

针对于前端大数据结构化存储，以上的存储方式可能还是受限制；解决方式是使用前端存储数据库 Web SQL数据库和 IndexedDB数据库