常见前端本地存储

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

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

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 等等，这些会在下次得时候介绍给大家，有不足之处，希望支出