Web Storage

常用的web客户端存储

1. 引言

本地存储:避免取回数据前页面空白,减少请求服务器次数 chrome浏览器,查看resources

2. 常用存储方案

2.1. indexDB

类似SQL数据库的结构化数据存储机制,能够在客户端存储大量的结构化数据 缺点: 兼容性不好,浏览器支持度低

2.2. cookie

HTTP cookie 「浏览器」提供的一种机制,通过document.cookie访问

  • 既可以服务器端设置,也可以客户端设置,会跟随任意HTTP请求发送
  • cookie是存于用户硬盘的一个文件,这个文件通常对应于一个域名,也就是说,cookie可以跨越一个域名下的多个网页,但不能跨越多个域名使用
2.2.1. 用途
  1. 保存用户信息
  2. 购物车
  3. 跟踪用户行为
2.2.2. 查找过程
  1. 用户访问站点
  2. web应用读取cookie包含的信息
  3. 再次访问时,浏览器在本地硬盘上查找相关cookie
  4. 若存在该cookie,添加到request header cookie字段中,与该HTTP请求一起发送 存储在cookie的数据每次都会自动添加到请求中,滥用则降低性能
2.2.3. cookie相关属性
  1. domain 和 path 共同决定了cookie的共享页面 例如cookie设置为"domain=.google.com.hk; path=/webhp",那么只有".google.com.hk/webhp"及"/webhp"下的任一子目录如"/webhp/aaa"或"/webhp/bbb"会发送cookie信息,而".google.com.hk"就不会发送,即使它们来自同一个域。
  2. expries 和 max-age 是用来决定cookie的生命周期
  3. secure cookie的安全标志 cookie中唯一一个非名值对儿的部分,默认为空,不论是 http 请求还是 https 请求,均会发送cookie。 指定后,cookie只有在使用SSL连接(如HTTPS请求)时才会发送到服务器
  4. httponly 服务端设置 限制客户端脚本对cookie的访问,将 cookie 设置成 httponly 可以减轻xss攻击的危害
2.2.4. cookie设置
  1. 服务器端 通过发送一个名为 Set-Cookie 的HTTP头来创建一个cookie,作为 Response Headers 的一部分,每个Set-Cookie 表示一个 cookie(如果有多个cookie,需写多个Set-Cookie),每个属性也是以名/值对的形式(除了secure),属性间以分号加空格隔开。格式如下: Set-Cookie: name=value[; expires=GMTDate][; domain=domain][; path=path][; secure]

只有name,value发送到服务器,其他是给浏览器的指示

  1. 客户端 document.cookie = "name=value[; expires=GMTDate][; domain=domain][; path=path][; secure]"
var cookie = {
        /**设置cookie 
         ** name 标识
         ** value 值
         ** options {
         **   'path': '访问路径',
         **   'domain' : '域名',
         **   'expire' : 过期时间
         }
         **/
        setCookie : function(name,value,options){
          var options = options ? options : {},
              path = options.path ? options.path : '/',
              domain = options.domain ? options.domain : document.domain,
              time = options.expire ? (new Date().getTime() + options.expire * 1000) : '',
              expire = new Date(time).toUTCString();
          document.cookie = encodeURIComponent(name) + "="+ encodeURIComponent(value) + ";expires=" + expire + 
                            ";domain=" + domain + ";path=" + path;
        },
        //获取cookie
        getCookie: function(name){
          var arr,
              reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
          if(arr=document.cookie.match(reg)){
             console.log(arr);
             return unescape(arr[2]);
          }
          return null;
          
        },
        //移除cookie
        removeCookie: function(name){
          var val = this.getCookie(name);
          if(val != null){
            this.setCookie(name,val, {
              expire : - 1
            })
          }
        }
      }
2.2.5. 优缺点

优点: 兼容性好 缺点:

  1. 增加了网络流量
  2. 数据容量有限(最多4kb,浏览器间有区别)
  3. 安全性

2.3. sessionStorage和localStorage

key value形式存储

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储
if(typeof(Storage)!=="undefined")
{
    // 是的! 支持 localStorage  sessionStorage 对象!
    // 一些代码.....
} else {
    // 抱歉! 不支持 web 存储。
}
2.3.1. 使用

localStorage.sitename = "超然haha"; localStorage.removeItem("lastname");

  • 保存数据: localStorage.setItem(key,value);
  • 读取数据: localStorage.getItem(key);
  • 删除单个数据: localStorage.removeItem(key);
  • 删除所有数据: localStorage.clear();
  • 得到某个索引的key:localStorage.key(index);
2.3.2. 适用范围
  • 不需要和服务器进行交互的一些数据 比如导航栏当前的状态,一些普通的数据进行缓存。甚至我们可以存储html片段,js或者css文件段
  • 很多应用通过版本控制来存储一些不经常改动的js/css文件。减少用户请求带宽的同时优化整个页面的加载速度。
2.3.3. 注意

localstorage存储的值只能是字符串的形式 当我们存储数据为引用对象的时候,会默认调用对象的toString方法,转化为字符串存储 所以我们在存储数组时,存储的数据会将数据项以,隔开,解析的时候需要我们分解成为数组再操作。而对于对象,我们需要用JSON.stringify转化存储,获取数据后再用JSON.parse转化为对象

2.4. web storage 与 cookie

web storage优点:

  1. web storage 为了更大容量存储,一般限制为同一域名5M,,并且不同域名的数据不能相互访问
  2. localStorage是存储在用户本地的浏览器上,不像cookie一样携带在http请求头部的字段里面,这有效的节约了带宽
  3. cookie需要指定作用域,不可跨域调用
  4. 拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie

cookie优点:

  1. cookie作用是与服务器交互,作为HTTP规范的一部分,web storage仅仅为本地存储而生

参考:常用的本地存储——cookie篇

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

localStorage的黑科技-js和css缓存机制

一、发现黑科技的起因  今天在微信公众号看到一篇技术博文,想用印象笔记收藏,所以发送了文章链接到pc上。然后习惯性地打开控制台,看看源码,想了解下最近微信用了什...

800120
来自专栏非典型程序猿

Golang任务队列machinery使用与源码剖析(一)

异步任务,是每一位开发者都遇到过的技术名词,在任何一个稍微复杂的后台系统中,异步任务总是无法避免的,而任务队列由于其松耦合、易扩展的特性,成为了实现异步任务的可...

1.6K100
来自专栏菩提树下的杨过

java:如何让程序按要求自行重启?

正文开始前的废话: 这里的程序即包括b/s的web application,也包括standalone的类c/s的java application。 为什么要自...

29450
来自专栏技术博文

关于微信二次分享,描述变链接的解决方法(一)----文档说明

声明: 本篇博文只是个人工作中的分享总结,仅代表个人观点,虽然解决了不少网友的问题,但同时也引来了一些网友的不满,所以特此声明,当您遇到本博文解决不了的问题,可...

1.4K70
来自专栏即时通讯技术

SSE技术详解:一种全新的HTML5服务器推送事件技术

一般来说,Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询、Comet技术、We...

18340
来自专栏Java帮帮-微信公众号-技术文章全总结

day03.集群部署zookeeper【大数据教程】

day03.集群部署zookeeper【大数据教程】 一、Nginx/keepalived/lvs的介绍 1. nginx 1.1. nginx简介 Ngin...

48780
来自专栏耕耘实录

使用awk命令批量删除指定范围的账号

版权声明:本文为耕耘实录原创文章,各大自媒体平台同步更新。欢迎转载,转载请注明出处,谢谢

10530
来自专栏Hadoop和Spark

用AWS部署一个无服务架构的个人网站

在这篇文章里我想介绍下怎样利用AWS(hjlouyoujuqi360com)部署一个无服务架构的个人网站。这个个人网站将具备以下特点:

44540
来自专栏京东技术

IntelliJ插件开发-京东工程师教你改造你的IDE

王帅廷,京东 Android高级开发工程师,6年以上开发经验,对设计框架有着深刻的认识,负责京东商城研发工具的开发,设计并完成了多个IntelliJ插件的开发工...

31820
来自专栏菩提树下的杨过

java:如何让程序按要求自行重启?

正文开始前的废话: 这里的程序即包括b/s的web application,也包括standalone的类c/s的java application。 为什么要自...

35550

扫码关注云+社区

领取腾讯云代金券