常见前端本地存储 - HelloWorld开发者社区

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

cookie
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有些不同，他可以进行跨页读取，并且他是一个真正的本地存储，他并不会因为浏览器的关闭而清除数据，如果你不进行手动清除的话，他是会一直存在的