Storge的使用

Storage存储的基础知识

1 Storage的分类

• localStorage：本地存储，提供的是一种永久性的存储方法，在关闭掉网页重新打开时，存储的内容仍然保留
• sessionStorage：会话存储，提供的时本次会话的存储，在关闭会话时，存储的内容会被清除

2 Storage常见的方法和属性

2.1 常见的属性

Storage.length：只读属性，返回一个整数，表示在Storage对象中的数据项数量

2.2 常见的方法

Storage.key()：该方法接受一个数值n作为参数，返回存储中的第n个key名称

Storage.getItem()：该方法接受一个key作为参数，并且返回key对应的value

Storage.setItem()：该方法接受一个key和value，并且将会把key和value添加到存储中，如果key存储，则更新其对应的值

Storage.removeItem()：该方法接受一个key作为参数，并把该key从存储中删除

Storage.clear()：该方法的作用是清空存储中的所有key

3 localStorage

3.1 什么是localStorage

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

3.2 localStorage的优势

1、localStorage拓展了cookie的4K限制
2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的
3、localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空

3.3 localStorage的使用

localStorage.getItem(key):获取指定key本地存储的值
localStorage.setItem(key,value)：将value存储到key字段

比如：
在A页面中先存储：

var imgs = obj_mainform.archivesId  //声明个变量存储下数据
localStorage.setItem('key',imgs);  //将变量imgs存储到name字段

在B页面中使用：

var naid = localStorage.getItem("key"); //获取指定key本地存储的值

以上就是localStorage.setItem()和localStorage.getItem()的使用方式

token详解

前端一般把服务器获取的token存储到localStorage中

localStorage详细用法

插件vue-cookies的用法

Vue中使用js-cookie插件

4 sessionStorage

不常用，用法同localStorage