前端本地存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。

一，本地存储特性

1、数据存储在用户浏览器中

2、设置、读取方便、甚至页面刷新不丢失数据

3、容量较大约5M

4、只能存储字符串，可以将对象JSONstringify() 编码后存储

二，windowsessionStorage

1、生命周期为关闭浏览器窗口

2、在同一个窗口(页面)下数据可以共享

3、以键值对的形式存储使用

存储数据：

sessionStoragesetItem(key,value)

获取数据：

sessionStoragegetItem(key)

删除数据：

sessionStorageremoveItem(key)

清空数据：(所有都清除掉)

sessionStorageclear()

三windowlocalStorage

存储空间高达5m

没有过期时间

localStorage  会一直存在

sessionStorage 窗口关闭失效

cookie会在客户端和服务器端往返 ，本地存储只存储在本地

存储数据:

设置存储有三种方式：

localStoragekey="value"

localStorage["key"]="value"

localStoragesetItem(key, value)

localStoragesetItem(key,value)

//参数1 是键

//参数2是对应的值

//setItem  也是修改元素

注意:不能直接存储对象  可以将对象转化为1个字符串

//注意:不能直接存储对象  可以将对象转化为1个字符串

//通过json

varstr=JSONstringify(对象名);

localStoragesetItem('对象名',str);

//使用的时候可以再将json字符串转为对象

varstr1=localStoragegetItem('对象名');

varobj=JSONparse(str);

获取数据：

localStoragegetItem(key(1))

//通过索引获取key值

//没有就返回null

删除数据：

localStorageremoveItem(key)

//删除 通过key值

清空数据：(所有都清除掉)

localStorageclear()

对象长度(有多少个元素)

localStoragelength

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

用法： 

储存：sessionStoragesetItem("变量名", "变量值")；

获取： sessionStoragegetItem("变量名")；

localStorage 方法存储的数据长期存在浏览器中，必须手动清除

用法： 

储存：localStoragesetItem("变量名", "变量值")；

获取：localStoragegetItem("变量名");

Vuex 是一个专为 Vuejs 应用程序开发的状态管理模式+库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

用法： >

从本地获取数据得到的是字符串，要先从字符串转为js对象（数组）。

1localStorage中只能存字符串，如果直接把对象放到localStorage中，则直接保存object object这个字符串。2如果调用localStorage的getItem("carts")方法得到的信息也是字符串。

例如字符串和对象class Person extends Object{String name;}Person p=new Person();这是一个JAVA对象，转为字符串，用tostring方法。

localStoragegetItem(key)//获取localStorage中一条信息，此处key为信息的key。

//然后需要将获取的内容存储到session中，至于怎么存到session中，可以将内容传至后台处理。

传值是最好将字典，数组类型的 转成json字符串比较好

JSONstringify(item)

然后到下一个页面 的mounted()函数中取值

如果在微信中 下面有 <- -> 前进返回 箭头 就要用 name 这种方式push 下一个页面是可以到下一个页面，但是单按右箭头返回时是返回不到先前界面的

因为它记录的是页面路劲，所以如果想要实现可以返回的界面切换最好要用 path 路径来push

//本地存

//用的时候取

还有一个 sessionStorage 缓存传值 和 localStorage的 *** 作类似

WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。

WebStorage两个主要目标：（1）提供一种在cookie之外存储会话数据的路径。（2）提供一种存储大量可以跨会话存在的数据的机制。

HTML5的WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）。

1、生命周期：localStorage:localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。

sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

2、存储大小：localStorage和sessionStorage的存储数据大小一般都是：5MB

3、存储位置：localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。

4、存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

5、获取方式：localStorage：windowlocalStorage;；sessionStorage：windowsessionStorage;。

6、应用场景：localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。sessionStorage：敏感账号一次性登录；

WebStorage的优点：

（1）存储空间更大：cookie为4KB，而WebStorage是5MB；

（2）节省网络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样美词请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了网络流量；

（3）对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便；

（4）快速显示：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快；

（5）安全性：WebStorage不会随着>

1绝大部分都可以，不过如今有个别基于localStorage的登陆，这套做法似乎不能很好处理；websocket的会话维持自然也不行。各个网站登陆逻辑可能各有差异，但是绝大部分还是围绕cookie为核心的，毕竟>

1 保持状态：cookie保存在浏览器端。

2 cookie的保存时间：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束。

3 cookie只能保存字符串类型，以文本的方式。

4 单个cookie保存的数据不能超过4kb。

5 cookie的安全性较低。

CookiesetCookie（） 添加

CookiegetCookie（）        获得

CookieremoveCookie（） 删除

1 保持状态：localStorage将数据保存在客户端本地的硬件设备中。

2 生命周期：localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。

3 存储大小：localStorage的存储数据大小一般都是：5MB 。

4 存储位置：localStorage都保存在客户端，不与服务器进行交互通信。

5 存储内容类型：localStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理。

setItem (key, value) ——  保存数据，以键值对的方式储存信息。

 getItem (key) ——  获取数据，将键值传入，即可获取到对应的value值。

removeItem (key) ——  删除单个数据，根据键值移除对应的信息。

clear () ——  删除所有的数据

key (index) —— 获取某个索引的key

以上就是关于前端本地存储全部的内容，包括:前端本地存储、23、Vuex、localStorage、sessionStorage、cookies的区别、localstorage不刷新无法读取等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！