zoukankan      html  css  js  c++  java
  • 本地存储

    一、什么是本地存储
    1.将部分存储到客户端(浏览中)
    2.作用:数据存储在本地避免重复调用服务器资源。
    离线依旧可以访问
    避免在请求服务器时空白状态

    二、本地存储的分类
    web SQL,indexedDB
    LocalStorage,Session
    Cookies->最早出现的本地存储
    Application cache

    三、Cookies
    1.是以文件的信息保存在浏览器中的一段文本信息。
    2.cookies是浏览器提供的功能,向服务器与js开放,所以服务器及客户端都可以保存cookies
    3.js存储cookies:cookies是document下面的一个属性
    document.cookie='名=值';//写入的值必须是以名值对的形式存在的。
    4.存储cookie时常用属性:expires:过期时间,日期格式(new Date())
    max-age:保存时间,就是保存cookie多少秒;默认为-1,表示关闭失效。
    ps:当存储时,如果不指定expires或max-age,那么cookie即关闭浏览器失效
    domainn,path:限定访问区域
    读取cookie:document.cookie=>读取数据在一个字符串,需要切割字符串
    销毁cookie:将max-age设置为0或expires设置为过期时间 ;
    4.注意:1)cookies必须运行在服务器环境中
    2)cookie默认不能跨域
    3)只能保存4kb的内容,ie6限定只能存20个cookie
    4)以明文的形式传输和保存的,极容易被盗用,安全性不够高(自己加密)
    5)兼容性好,所有的浏览器都支持。
    6)自动加载到request header中,如果过大会,请求时间会很长
    四、LocalStorage和SessionStorage
    1.可以理解为一个容量更大的cookie,是H5里新加的功能
    2.分类:LocalStorage和SessionStorage,基本没区别,唯一的区别在于localstoorage是永久存储在本地,但是sessionstoryage关闭浏览器就丢失。
    浏览器的支持情况:IE8+,Firefox3.0+,chrome4.0+,opera10.5+,safari4.0+,ios2.0+,android2.0+
    存储:window下的属性
    window.localStorage.a='b';//a=b
    localStorage['color']='red';/color=red/
    localStorage.setItem('m','n');//m=n
    获取: console.log(getItem('m'));
    console.log(localStorage.a);
    console.log(localStorage['color']);
    销毁:localStorage.removeItem('名')
    locaStorage.clear();
    3.注意:
    1)可以存储5M的内容,部分浏览器是可以自定义存储大小容易出现兼容的问题。
    2)IE和火狐必须运行在服务环境。
    应用场景:
    1)记住用户信息。
    2)购物车
    3)记录用户足迹

  • 相关阅读:
    nginx 报错 upstream timed out (110: Connection timed out)解决方案
    mysql 数据库缓存调优之解决The total number of locks exceeds the lock table size错误
    阿里云ECS主机内核调优
    安装Python3.6.x
    CentOS 下 LNMP 环境配置
    Walle代码发布系统
    Ansible 运维自动化 ( 配置管理工具 )
    Kafka消息的时间戳
    Linux内存分析
    H3C 查看路由器的硬件信息
  • 原文地址:https://www.cnblogs.com/zouxianlu/p/6780163.html
Copyright © 2011-2022 走看看