常见前端本地存储

joy968 发布于2019-08-26 10:23 / 2972人阅读

摘要：说一说常用得本地存储方法这个东西我觉得对于前端来讲都不会很陌生，浏览器都会支持在最初得时候适用于客户端存储会话信息用的，在我们发送请求得时候，响应头会包含此次会话得会话信息返回给客户端，浏览器回存储这样得会话信息并且在本地有了之后，每次发送

说一说常用得本地存储方法

localStorage

sessionStorage

cookie

cookie这个东西我觉得对于前端来讲都不会很陌生，浏览器都会支持cookie
HTTP cookie 在最初得时候适用于客户端存储会话信息用的，在我们发送http请求得时候
，响应头会包含此次会话得会话信息返回给客户端，浏览器回存储这样得会话信息

并且在本地有了cookie之后，每次发送请求都会把信息发送回服务器

cookie得基本使用

cookie 得设置很简单，直接document.cookie赋值就可以，一般情况下cookie得存储格式是

document.cookie = "名字=值";

然后里边可以附带一些选项是选填得

expires

domain

path

secure

cookie的选项

expires是设置cookie得过期时间得，如果没有设置expires的话，默认是当前得会话，即关闭浏览器后cookie失效

domain是指定了cookie将要被发送得域，默认是创建了这个cookie得域名

path顾名思义，路径，就是说在请求的时候，url里边必须要存在这个路径，才会发送cookie这个消息头

secure，这个选项是一个标记，不用赋值，这个标记代表着只有通过https创建得请求才能被发送到服务器

上边讲了cookie得创建，那么修改得话是不是和创建一样呢，答案是否定得，
cookie并不能像变量一样随意得修改赋值。

cookie的修改

想要改变cookie得值得话，首先要确定之前讲的四个选项中domain和path都是相同得才可以
，其中有一个不同得时候都会创建出一个新的cookie比如说

    Set-Cookie:name=aa; domain=aaa.net; path=/
        
Set-Cookie:name=aa; domain=aaa.net; path=/xxx

这样的话并不会修改之前得cookie ，只会创建一个新的cookie，再比如说

Set-Cookie:name=aa; domain=aa.net; path=/

Set-Cookie:name=bb; domain=aa.net; path=/

上边这种得话是会把之前得cookie修改掉的

cookie的删除

还有一个cookie得删除

在之前我们说到了在这四个选项之中有一个过期时间，最常用的方法就是给cookie设置一个过期的事件，这样cookie会被浏览器删除，

当然也存在其他的删除情况，比如说浏览器被关闭，或者说 cookie超出限制，这个限制根据不同的浏览器，数量也不一样，一般都是20个

cookie常常被用来跟踪用户信息，或者校验用户身份等等，在cookie里边放一些敏感的信息是很不明智的，因为cookie是明文传输，很容易被别有用心的人利用

另外cookie本身的话，不是那种真正意义上的本地存储，因为cookie的大小最大只有4kb大

sessionStorage

上边有提到cookie的大小问题，在html5的时候，就出现了sessionStorage和localStorage

sessionStorage和localStorage 都受到同源策略限制，就是跨域问题，在访问sessionStorage和localStorage 的时候，页面必须在同一个域名，使用同一个协议，并且一个端口

sessionStorage在使用中有很严格的要求，他在一个tab页里边不能被另一个tab页使用

应用的场景有，比如说我们都制动，在页面刷新的时候，我们写的js里边的变量函数等等的，内存会被释放掉，那么这个时候可以用sessionStorage来存储一些不想被释放掉内存的数据，比如说记录一个滚动条的位置，或者播放器的进度等等

sessionStorage会在标签页被关闭的时候呗清空

sessionStorage和localStorage 也有大小限制，相比cookie就大了很多，是5M

localStorage

现在说一说这个localStorage，刚才又说到sessionStorage是不可以跨页的，那么这个限制，对于我来讲我感觉叫他本地存储是有点牵强的，下边要说的这个localStorage，他和sessionStorage有些不同，他可以进行跨页读取，并且他是一个真正的本地存储，他并不会因为浏览器的关闭而清除数据，如果你不进行手动清除的话，他是会一直存在的

storage 事件通讯

storage事件是可以跨页面通讯的，在你对storage对象进行任何操作的时候，都会出发storage事件

事件里边包括

domain：发生变化的存储空间的域名

key：设置或者删除的键名

newValue：如果是设置值，则是新值；如果是删除键，则是null

oldValue：键被更改之前的值

storage的使用

那么，在上边说了这么多屁话之后，他到底是怎么用的呢。

常用的api 有


setItem("name","val")

上边这个setItem是storage的一个方法用来存储数据，第一个变量是键，第二个变量是存储得值

也可以直接用属性名称赋值比如说

sessionStorage.name="123"

同理取值，相比也能猜出来了

    
getItem("name")

只需要传一个键名进去就可以取到对应得值

同理也可以直接去点属性名称

sessionStorage.name

需要注意得是 storage只能存储字符串，如果是对象或者数组等等其他数据类型得时候需要转译一下才可以存储

以上是对前端常用本地存储得一些认识，当然还有前端数据库比如说indexedDB Web SQL 等等，这些会在下次得时候介绍给大家，有不足之处，希望支出

GPU云服务器云服务器常见的数据存储方式分布式存储常见问题常见的云存储服务器常见的分布式存储开源软件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106096.html

关于网页本地存储的一些思考

摘要：于是一个拥有版本控制和过期控制的本地内容存储功能模块就算初步完成了。最后基于这个事情的考虑，于是顺便写了个本地存储控制的库，基本都在上面了前言关于localStorage sessionStorage之类的api怎么用已经无需我再赘述了，但是具体怎么落实到一个稍微复杂一些的业务中还是需要做一些前期的准备遇见的一些问题 1.localStorage 与 sessionStorage...

陈江龙 2019-08-22 15:26 评论0 收藏0
关于网页本地存储的一些思考

摘要：于是一个拥有版本控制和过期控制的本地内容存储功能模块就算初步完成了。最后基于这个事情的考虑，于是顺便写了个本地存储控制的库，基本都在上面了前言关于localStorage sessionStorage之类的api怎么用已经无需我再赘述了，但是具体怎么落实到一个稍微复杂一些的业务中还是需要做一些前期的准备遇见的一些问题 1.localStorage 与 sessionStorage...

henry14 2019-08-01 18:42 评论0 收藏0
IMWeb前端提升营七天学习总结

摘要：写在前面月到这天，前端提升营，腾讯大佬们分享个人经验，使出各种前端方面的大招。并且减轻服务器的负担，的原则是按需取数据，可以最大程度的减少冗余请求和响应对服务器造成的负担。控制表单控件的禁用状态。写在前面 5月24到30这7天，IMWeb前端提升营，腾讯大佬们分享个人经验，使出各种前端方面的大招。从中学习了很多前端方面的知识，也get到了前端学习的方法论，还有一些算法知识等等。现将...

mating 2019-08-20 16:59 评论0 收藏0