web storage API

最新推荐文章于 2024-03-27 10:34:37 发布

鲤朵

最新推荐文章于 2024-03-27 10:34:37 发布

阅读量430

点赞数

分类专栏： html5+css3 文章标签： html5 web api 存储数据

html5+css3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

web storage

在web上或者客户端本地存储数据，有两种机制：sessionStorage & localStorage。

sessionStorage
用于本地存储一个会话中的数据，只有在同一个会话中的页面才能访问，且随着会话的结束而销毁。
localStorage
用于持久化的本地存储，数据保存在客户端本地的硬件设备（硬盘）中。

cookie优点
- 极高的扩展性和可用性。通过良好的编程，控制保存在cookie中的session对象的大小。通过加密和安全传输技术（SSL），减少cookie被破解的可能性。只要cookie中不存放敏感数据，即使被盗也不会有重大损失。控制cookie的生命期，使之不会永远有效。偷盗者可能拿到一个过期的cookie
- cookie不可或缺。它是作为HTTP规范的一部分，用于和服务器交互。
- 持久保存客户端数据，为服务端存储减轻负担
cookie缺点
- cookie的数量和长度限制。有大小限制4KB，超过会被截掉。每个域名下最多生成20个cookie。IE6和更低版本最多20个cookie，IE7和之后最后50个，Firefox最多50个，chrome和safari没有硬性要求。IE和opera会清理近期最少用的cookie，Firefox会随机清理cookie。
- 安全性问题。如果有人拦截了cookie，那他就可以得到所有的session信息。即使加密也于事无补，因为拦截者不需要知道cookie的意义，他只需要原样转发cookie就可以达到目的。
- 有些状态不可能保存在客户端。比如，为了防止重复提交表单，我们需要在服务器端保存一个计数器，如果这个计数器保存在客户端，那么它不能起任何作用。
- 浪费带宽。每次请求一个新的页面，cookie会随着http事务一起发送，会浪费一部分带宽。
- 操作复杂。需要指定作用域，需要自己封装setCookie & getCookie，且不可以跨域调用。

两者概念类似，区别在于web storage 是为了大容量存储而设计。
cookie大小受限，且每次请求一个新的页面都会把cookie一起发送过去，无形之中浪费带宽。
web storage 拥有setItem getItem removeItem clear方法，不像cookie需要自己封装setCookie & getCookie，且cookie在使用时需要制定作用域，且不可以跨域使用。
但是cookie作为HTTP规范的一部分，用于与服务器交互，而web storage仅仅是存储本地数据。

cookie数据存放在客户的浏览器上，session数据放在服务器上。
cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗
考虑到安全应当使用session。
session会在一定时间内保存在服务器上。当访问增多，会占用你服务器的性能
考虑到减轻服务器性能方面，应当使用cookie。
单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
所以个人建议：
将登陆信息等重要信息存放为session
其他信息如果需要保留，可以放在cookie中

web storage syntax

//key/value形式存储、读取数据
sessionStorage.setItem('key', 'value');
sessionStorage.getItem('key');
localStorage.setItem('key', 'value');
localStorage.getItem('key');

//or点方式读取、存储数据
var storage = window.localStorage;
storage.key = "hello";
console.log(storage.key);

//or[]方式读取、存储数据 
val storage = window.localStorage;
storage['key'] = 'world';
console.log(storage['key']);

//删除数据，清除所有数据
sessionStorage.removeItem('key');
localStorage.removeItem('key');
sessionStorage.clear();
localStorage.clear();

web storage API example

//参照http://mdn.github.io/web-storage-demo/
//首先查看是否有本地数据，如果有，则用起设置样式，若无，则先存储当前数据，再设置样式
if(!localStorage.getItem('bgcolor'){
    populateStorage();
}
else{
    setStyles();
    }

function populateStorage(){
localStorage.setItem('bgcolor',document.getElementById('bgcolor').value);
localStorage.setItem('fontstyle',document.getElementById('fontstyle').value);
localStorage.setItem('image',document.getElementById('image').value);

setStyles()
}
function setsStyles(){
    //获取本地数据
    var currentbgcolor = localStorage.getItem('bgcolor');
    var currentfontstyle = localStorage.getItem('fontstyle');
    var currentimage = localStorage.getItem('image');

    //设置样式
    document.getElementById('bgcolor').value = currentbgcolor;
    document.getElementById('fontstyle').value = currentfontstyle;
    document.getElementById('image').value = currentimage;

    htmElem.style.backgroundColor = "#" + currentbgcolor;
    pElem.style.fontFamily = currentfontstyle;
    imgElem.setAttribute('src', currentimage);
}

//html5的类jQuery选择器，更方便的从dom 中选取元素，返回单个元素，按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM中查找，返回第一个满足条件的元素
var htmElem = document.querySelector('html');
var pElem = document.querySelector('p');
var imgElem = document.querySelector('img');

//表单内容改变时，触发onchange事件，重新保存本地数据，并且设置样式
var bgcolorForm = document.getElementById('bgcolor');
var fontstyleForm = document.getElementById('fontstyle');
var imageForm = document.getElementById('image');

bgcolorForm.onchange = populateStorage;
fontstyleForm.onchange = populateStorage;
imageForm.onchange = populateStorage;

note：编写代码过程中将script引用标签放在head中，导致无法运行。原因：在js代码中，if判断语句在js文件初始化时立刻执行，而dom节点需要页面加载完成后才可获取。因此导致
error error